I have a nav built with a list and sub nav as lists inside a parent list. The sub nav resides in the next list item to it's corresponding main nav link:
This sits in a div with an id of 'nav'
<ul>
<li>Nav main 1</li>
<li>
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Nav main 2</li>
<li>
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
Currently I have the following jquery:
$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){
if ($(this).next().is(':visible')) {
$(this).next().hide();
} else {
$("#nav ul li a[href^='#']").each(function(){
$(this).next().hide();
});
$(this).next().show();
}
});
I thought this would work to make all the sub menu's hide and then show the one that had been clicked on. For some reason nothing happens. I have checked the console (firebug) and there is no error shown.
Getting frustrated with it now! :-/
EDIT: Here is the answer:
$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){
$(this).parent().next().hide();
$(this).click(function() {
if ($(this).parent().next().is(':visible')) {
$(this).parent().next().hide();
} else {
$("#nav ul li a[href^='#']").each(function(){
$(this).parent().next().hide();
});
//then reshow and label the clicked nav
$(this).parent().next().show();
}
});
});
});
HTML:
<div id="nav">
<ul>
<li>
Nav main 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>
Nav main 2
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
</div>
JavaScript:
var s = $('#nav ul ul').hide();
$('#nav a').click(function() {
var u = $(this).next();
u.is(':visible') ? u.hide() : ( s.hide(), u.show() );
return false;
});
Live demo: http://jsfiddle.net/Tq6LM/1/
Never mind... I have figured it out. Writing it out again must have helped. I needed to call the .parent()
Seems that i was trying to call the next a href, i needed to call the next list!
DEMO: http://so.devilmaycode.it/jquery-and-selecting-the-next-list-items-objects
your Javascript Code should be:
$(function() {
$('#main-nav li').click(function(e) {
e.preventDefault();
$('#main-nav li ul').slideUp(500);
$(this).find('ul:not(:visible)').slideDown(500);
});
});
little bit of CSS
#main-nav li ul { display:none }
your HTML should look like this:
<ul id="main-nav">
<li>Nav main 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Nav main 2
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
Related
I've got a script that checks an li list and will show the first, with every click it will show the next li.
The problem is with this script, I have to add an empty li to "hide" all of them, is there a way to work around this, with this script?
$('#test-div2 ul li').hide().filter(':lt(1)').show();
$('#hint-1').click(function(){
$eL = $('#test-div2 ul li').filter(":visible");
$("#test-div2 ul").find("#test-div2 ul li").hide().next().show();
if($eL.next().length>0){
$eL.next().show();
}
});
This is the html:
<ul>
<li></li>
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>
How about just making the container div the thing to click to get a hint and cleaning up your JQuery a bit?
$('#hints li').hide();
$('#test-div2').click(function(){
$eL = $('#hints li').filter(":visible");
$("#hints li:first-child").show();
if($eL.next().length > 0){
$eL.next().show();
}
});
#test-div2 {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hints">
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>
<div id="test-div2">Show hint</div>
is it possible, to add auto incremental classes to a list
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Now, If I hover on Element 3 then, add auto incremental classes to li like example below...
<ul id="list">
<li class="left2">Element 1</li>
<li class="left1">Element 2</li>
<li>Element 3</li>
<li class="right1">Element 4</li>
<li class="right2">Element 5</li>
</ul>
Again if hover on Element 1 then, add auto incremental classes to li like example below...
<ul id="list">
<li>Element 1</li>
<li class="right1">Element 2</li>
<li class="right2">Element 3</li>
<li class="right3">Element 4</li>
<li class="right4">Element 5</li>
</ul>
sorry about my poor English. Thank you.
$('li').hover(function() {
$('li').removeClass();
var next = $(this).nextAll();
next.each(function(i, v) {
$(this).addClass('right' + (i+1))
})
var prev = $(this).prevAll();
prev.each(function(i, v) {
$(this).addClass('left' + (i+1))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Use .prevAll() and .nextAll()
Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
then iterate on the li and assign the index. make sure to remove the li classes so it wont stack up
Based on example, I cleared all the class in <li> when mouseenter anyone of the <li> and add new class for them.
left1+n will add to previous all <li> and right1+n will add to next all <li>
$("#list > li").on("mouseenter", function(){
$("#list > li").attr("class", "");
$(this).prevAll("li").each(function(i) {
$(this).addClass('left' + (i+1));
});
$(this).nextAll("li").each(function(i) {
$(this).addClass('right' + (i+1));
});
});
Actually I'm really very sorry about my question, I'm not sure how to make attention or ask question about this kind of problem.
Please see my code 1st.
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
The jquery code is:
<script>$('#product').click(function () {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists li').click(function () {
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
});
$('#lists li ul li').click(function () {
var item = $(this).data('item');
$('.code3').empty().append(item);
});</script>
You may directly view this at http://codepen.io/alshedupur/pen/YqKGqV
Everything is work fine, but my problem is, when I trigger parent list item like: Product 1 / Product 2 / Product 3
In result I want to empty .code3 span
I try to use $('.code3').empty(); on 2nd action but if I use this, then 3rd action I mean sub list click function not work.
Please see my screenshot for clearly understand what I want:
You need to empty .code3 as well.
$('#product').click(function() {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists > li').click(function(e) {
e.stopPropagation();
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty();
});
$('#lists li ul li').click(function(e) {
e.stopPropagation();
var item = $(this).data('item');
var dmodel = $(this).parents("li").data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty().append(item);
});
#product:hover,
li:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
I have a list with different levels of depth:
<ul id="top-level" class="top-level">
<li>Item 1</li>
<li>Item 2
<ul class="sub-menu">
<li>Sub item 1</li>
<li>Sub item 2</li>
<li>Sub item 3
<ul class="sub-menu">
<li>Subsub item 1</li>
<li>Subsub item 2</li>
</ul>
</li>
<li>Sub item 4</li>
</ul>
</li>
<li>Item 3</li>
</ul>
I am using the following jquery script to add a class to the parents:
$("ul li ul").parent().addClass("menuparent");
Is there a way to add this class only to the top level parent li's and a different class for all other (deeper) parent li's?
Just use the > selector from your top level ul.
Based on your current selector:
$("ul.top-level > li > ul").parent().addClass("menuparent");
Or for li only:
$("ul.top-level > li").parent().addClass("menuparent");
For top level lis
$("#top-level > li").addClass("menuparent");
and for lower level li
$("#top-level li li").addClass("someotherclass");
If I understand correctly, people are not giving you answers for locating the deeper parent li's, here's my take:
$("ul.top-level > li > ul").find('li > ul').parent().addClass("deeper-parent-li");
I have basic markup for a drop down nav, nested lists.
The user will click on the top nav item, which will open up the sub nav, but my sub nav links aren't working.
It is in a CMS so I must have the links for the placeholder pages there.
Markup:
<ul class="navtop">
<li>Who
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Long Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>What
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Long Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
Javascript:
$(".navtop li").click(function(){
$(this).toggleClass("show");
$(this).siblings(".show").toggleClass("show");
return false;
});
css:
#headernav .navtop li.show ul
{
display: block;
}
I tried adding a 'return true' for $(".navtop li ul li a") but it didn't work.
Suggestions?
Why are you return false to the LI click? I believe that's the problem.
If you take that out, everything should work fine.
If that doesn't work, bear in mind you're attaching the click event to every LI instead of just the top level LIs. Try this instead:
$(".navtop > li").click(function(){
$(this).toggleClass("show");
$(this).siblings(".show").toggleClass("show");
});
Turns out this worked:
$(".navtop > li > a").click(function(){
$(this).parent('li').toggleClass("show");
$(this).parent('li').siblings(".show").toggleClass("show");
return false;
});