On-click drop-down nav menu - javascript

I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work.
I have found some Jquery for this but the problem is when you have two menus with ul and li, like this.
HTML:
<ul class="list-menu">
<li class="sort-menu">4</li>
<div class="sort-list-dropdown">
<ul class="sort-list">
<li>4</li>
</ul>
</div>
</ul>
When you duplicate this two times and then when you click the 4 on the class that says sort-menu, it will put up two menus containers and that class is sort-list-dropdown I have been playing with JS I got from somewhere and I'm getting confused about this issue.
JavaScript:
$("ul.list-menu > li").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("ul.sort-list > li").hide();
$(this).attr('id', '0');
} else {
$("ul.sort-list > li").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
return false;
});
//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
return false;
});
//Document Click
$(document).mouseup(function () {
$("ul.sort-list > li").hide();
$("ul.list-menu > li").attr('id', '');
});
I get some of the variables but I do not think it's the code. I think I need to input a new variable but I do not know what does it need for it.
If anybody knows how to accomplish this, then please reply back to me.

I have one answer for this problem. Please try this code below:
$(document).ready(function() {
$('.sort-list-dropdown').hide();
$('ul.list-menu li').click(function() {
$(this).next('.sort-list-dropdown').toggle();
});
});
In code 'click', you can change it to 'hover'.

Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/
HTML:
<ul>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li class="sec">Heading Two</li>
<li><ul>
<li>Third</li>
<li>Third</li>
<li>Third</li>
</ul></li>
</ul></li>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul></li>
</ul>
JS:
$(function(){
$('li.sec').on('click', function() {
$(this).next('li').slideToggle();
});
});
CSS:
ul li {
list-style:none;
}
.sec {
background:#efefef;
padding:25px;
font-size:24px;
}
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/

Related

How do I re-enable links with jQuery that have been disabled with e.preventDefault()?

I am working on making a long page of links in a set of nested <ul>'s more user friendly with some jQuery and CSS. I am unable to directly edit the HTML, but I was able to write code to collapse the lists so that only the top level <li>'s display, and then when the user clicks one, it expands to show all the children.
The problem is that the top level items are also links. I want to disable the links when the <li> is collapsed (and has class .notActive), and reenable them when it's expanded (and has class .open), so that users can expand the menu without being taken away from the page.
Unfortunately, the solutions I've tried have either disabled the links 100% of the time (when using event.preventDefault();) or have disabled all clicking events (when using pointer-events:none;), which also disables the expanding/collapsing functions.
I've read similar questions, such as this one:
How do I dynamically enable/disable links with jQuery? but haven't been able to figure out how to re-enable the links.
Here is my jsfiddle: https://jsfiddle.net/9raufx3s/121/ and here's what my code currently looks like:
CODE:
$(document).ready(function($) {
$(".children").closest("li").addClass("hasSubmenu");
if ($("li").hasClass("hasSubmenu")) {
$("li.hasSubmenu").append("<span class='plus'> +</span>");
}
$(".cat-item").click(function(e) {
$(this).toggleClass("open");
e.stopPropagation();
});
});
$("ul.category-column").after("<p class='all'>Expand All</p>");
$("p.all").click(function(f) {
$(".cat-item").addClass("open");
});
$(document).ready(function($) {
var top = $("ul.category-column li.hasSubmenu").first();
top.addClass("topLevel notActive");
top.siblings("li").addClass("topLevel notActive");
$("li.topLevel").click(function(n) {
$(this).toggleClass("notActive");
});
});
$(document).ready(function($) {
$("li.notActive a").on('click', function(disabled) {
disabled.preventDefault();
});
$("li.open a").on('click', function(enabled) {
return true;
});
});
li.open * {
display:block !important;
}
.children {
display:none;
}
li.open>span.plus {
display:none !important;
}
li.open>ul.children>li.hasSubmenu>span.plus {
display:none !important;
}
.all {
font-weight:bold;
cursor:pointer;
}
.notActive {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category-column">
<li class="cat-item cat-item-3">I. Heading Number One
<ul class="children">
<li class="cat-item cat-item-481">Subheading A</li>
<li class="cat-item cat-item-483">Subheading B
<ul class="children">
<li class="cat-item cat-item-587">Child of subheading B</li>
<li class="cat-item cat-item-588">Second child of subheading B</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-4">II.Heading Number Two
<ul class="children">
<li class="cat-item cat-item-200">Subheading C</li>
<li class="cat-item cat-item-201">Subheading D
<ul class="children">
<li class="cat-item cat-item-300">Child of subheading D</li>
<li class="cat-item cat-item-301">Second Child of subheading D</li>
</ul>
</li>
</ul>
</li>
</ul>
To answer your question about undoing preventDefault - you could work with Event binding and unbinding, as a simplified showcase:
function generic(evt) {
console.log('generic');
$('.toggable', this).toggleClass('hidden');
};
function toggle(evt) {
console.log('prevents');
evt.stopPropagation();
evt.preventDefault();
}
$('.toggle').on('click', function() {
var $this = $(this),
$target = $('.target');
if($this.hasClass('prevents')) {
$target.unbind('click', toggle);
$this.removeClass('prevents');
} else {
$target.bind('click', toggle);
$this.addClass('prevents');
}
});
$('.target').bind('click', generic);
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Duck<span class="toggable hidden">(toggable)</span>
<hr>
Toggle handler
But for your use-case you could do it in an easier and more efficient manner, again as a simplified showcase:
$('li').each(function() {
var $this = $(this),
$children = $('>ul', this),
$link = $('>a', this);
$this.on('click', function(evt) {
console.log('li clicked, propagation stopped');
// Don't bubble up collapsing
evt.stopPropagation();
$children.toggleClass('open');
});
$link.on('click', function(evt) {
if($children.length === 0 || $children.hasClass('open')) {
// If children are expanded or there are no children
// only prevent bubbling up the event
console.log('link clicked, propagation stopped');
evt.stopPropagation();
} else {
// If children are not expanded yet
console.log('link clicked, default prevented');
evt.preventDefault();
}
});
});
var collapsed = true;
$('.toggle-all').on('click', function(evt) {
evt.stopPropagation();
evt.preventDefault();
if(collapsed) {
$('ul').addClass('open');
collapsed = false;
} else {
$('ul').removeClass('open');
collapsed = true;
}
});
li>ul { display: none; }
li>ul.open { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Parent
<ul>
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li>Parent
<ul>
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
Toggle all

Issue targeting specific selector jquery in dropdwon menu

I have a drop down menu with jquery and I want to modify some text in different way depending on what is selected in the drop down menu.
The drop down menu works.
Html code:
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
Javascript code:
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1'){
$('#text_to_change').text("text changed");
}
if ($(this) == '#op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
Why does ($(this) == '#op1') not work?
You are trying to compare a jquery object $(this) with a string #op1
To get the id of the element use:
$(this).attr('id');
It will give you the id of the element without the #
Also i think your second if needs to be an else if { ...
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1'){
$('#text_to_change').text("text changed");
}
else if ($(this).attr('id') == 'op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
This two item must not share the same id 'op2'
<li id="op2">option2</li>
<li id="op2">option3</li>

Check each listview attribute in jquery

I have listview such like this:
<ul data-role="listview" id="listorder">
<li data-table='1'>menu a</li>
<li data-table='2'>menu b</li>
<li data-table='1'>menu c</li>
<li data-table='2'>menu d</li>
<li>spacer<li>
<li data-table='1'>menu e</li>
<li data-table='2'>menu f</li>
<li data-table='3'>menu g</li>
<li data-table='4'>menu h</li>
</ul>
I want to check all element in listorder and filter listorder that only display contain attribute data-table='1' and hide other li. First it will display all element, when user click a link table 1 from other link, it will filter listorder. when user click a link to display all, listorder will display all li, no filter.
how to do that in jquery?
Thank you all.
Thanks to #RGS my final code become:
$('#tabletab').off('tap', 'a').on('tap', 'a', function() {
tablepick = $(this).attr('data-table');
$('ul#listorder > li').hide();
if (tablepick=='0') $('ul#listorder > li').show();
$('#listorder li').filter('[data-table="'+tablepick+'"]').show();
});
$('.filter').click(function(){
$('ul#listorder > li').each(function(index){
if($(this).data('table')==1){
$(this).show();
}
else
{
$(this).hide();
}
});
});
$('.link').click(function(){
$('ul#listorder > li').show();
});
Demo:
http://jsfiddle.net/5c4tj/3/
Working Demo
Try this,
$('#filter').click(function () {
$('#listorder li').each(function () {
if ($(this).data('table') !== 1) {
$(this).hide();
}
});
});
OR Just
$('#filter').click(function () {
$('#listorder li').each(function(){
$(this).toggle($(this).data('table') == 1);
});
});
Demo
References :
.each() - Alternative you can use .filter()

When i click on main menu the sub menu should highlight in php

From many days am trying this but there is no result please help me when i click on main menu sub menu should highlight in php.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu a').each(function (index) {
console.log(this.href);
if (this.href.trim() == window.location) {
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active {
background: #4FA9E4;
color: #FFF;
display: block;
}
</style>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul>
<li class="has-parent">a
</li>
<li>b
</li>
</ul>
</li>
<li class="has-sub">Patners
<ul>
<li>c
</li>
<li>d
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
You should handle the click event or other events you are interested, and toggle class in the event handler.
$(document).ready(function () {
$('#cssmenu ul ul a').click(function (e) {
//e.preventDefault();
$(this).parents('li.has-sub').find('>a').toggleClass('active');
});
});
Check the jsFiddle example.

jquery slideDown and slideUp() not working for partial showing

Is it possible to show and hide partially with jquery sliding functions?
Basically, there's a list with 7 items. But only the 1st two are showing initially, while the rest is hidden. I want that when the user clicks to view more, all 7 items should show. And when he/she clicks again only the 1st two are showing and the rest is hidden again. But I can't manage to do it. Please give me some light, thanks.
jquery:
var ul = $('ul'),
showMoreLnk = $('a.show-more');
$('a').click(function(e){
if(ul.outerHeight() === 38){
ul.find('li.hide').removeClass('hide').addClass('show');
ul.slideDown(function(){
showMoreLnk.text('Show less');
});
} else {
ul.slideUp(function(){
showMoreLnk.text('Show more');
ul.find('li.show').removeClass('show').addClass('hide');
});
}
e.preventDefault();
});
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hide">Item 3</li>
<li class="hide">Item 4</li>
<li class="hide">Item 5</li>
<li class="hide">Item 6</li>
<li class="hide">Item 7</li>
</ul>
show more
CSS:
.hide{
display: none;
}
.show{
display: block;
}
Try this:
$('a').click(function (e) {
e.preventDefault();
$('ul li.hide').slideToggle('slow');
});
Check this out.
http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/
and the example:
http://sim.plified.com/jQuery/slide/#
Check out this code:
$('a.show-more').click(function (e) {
e.preventDefault();
var hidden_list = $('ul li.hide');
if (hidden_list.is(':hidden')) {
$(this).html("show less");
hidden_list.slideDown();
}
else {
$(this).html("show more");
hidden_list.slideUp();
}
});
I also created this for you to test in fiddle http://jsfiddle.net/Shanison/H4vbB/2/

Categories

Resources