I have a nav element which is something like this:
<ul>
<li name='first_item'>
<ul>
<li>item 1</li>
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
<li>item 2</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
and the code that handles the the sliding down and up is:(nav is a html element which is a parent of above)
nav.find("li").each(
if ($(this).find("ul").length > 0) {
_callback = false;
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
what happens is when I hover over the first_item it opens the sub menus and after it's finished sliding down them, it will open item 1's sub menus as well. I'm totally lost over this. Any help would be appreciated.
First of all, it seems you copyied the jquery without the function, so that isnt the problem:
nav.find("li").each(function(){
I think the problem is, that you travel to deep, so try this:
$(this).find(">ul")
or this:
$(this).children("ul")
From jQuery:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
Related
I am having an issue with my dropdown menu. I have the dropdown portion of the menu working, but when I click on a main navigational link it unveils all the list items instead of unveiling the ones relevant to the parent ul.
I have uploaded the file to jsfiddle.Could you please help me out: http://jsfiddle.net/7rwhP/1/
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li>Current Article
<ul>
<li>Example 1</li>
</ul>
</li>
<li>Past Articles
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</li>
<li>Tradition
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->
You need to modify your JavaScript so you aren't triggering the slideToggle on all ul ul items, and you need to add the click listener to an li - using #secondary-nav ul will trigger that click event for any item you click within that list.
Try this:
$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children('ul').slideToggle();
})
})
Remember, selectors in jQuery are just like CSS selectors. When you bind the click event to #secondary-nav ul, it will be triggered when you click anywhere in that list, because all of the list items are indeed children of the ul. Your original click handler #secondary-nav ul ul says "toggle all lists that are a child of a list", but you more pointedly wanted to achieve "toggle the list that is a child of the clicked list item".
DEMO
you should use $(this).children()
DEMO
$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children('ul').slideToggle();
})
});
You should add this css too
#secondary-nav ul li {
white-space:nowrap;
}
DEMO :After applying above css
We have the following situation:
<ul>
<li>Button 1</li>
<li class="active">Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
now the following code that handles it:
$('.tab-menu li').on('click', function() {
$($($(this).closest('.tab-menu')).find('li')).removeClass('active');
$(this).addClass('active');
});
it works, but is there a jQuery function that selects all 'parallel' elements ? I want this
part
$($($(this).closest('.tab-menu')).find('li')).removeClass('active');
make shorter. I know 'toggleClass', but this works only on the clicked element. Is there any shorter method to select all parallel elements? (In this siutation all 'li' that belongs to the specific 'ul');
Try this, using .siblings()
$(this).addClass('active').siblings().removeClass('active');
DEMO with onclick
Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W
you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link
Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)
Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo
You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems
I need to dinamically assign a .selected class to the element where I click and also remove any other previous class asigned to the clicked element so I can change CSS class. Maybe this code:
$(this).click(function(){
$(this).addClass('selected');
});
works but what happend if I click in any other LI? Any help to get this work?
EDIT:
Ok see this code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
By default none have any classes but I click in Item 2 then the HTML should transform on this one:
<ul>
<li>Item 1</li>
<li class="selected">Item 2</li>
<li>Item 3</li>
</ul>
but once again if I click in Item 3 then the HTML should transform on this one:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="selected">Item 3</li>
</ul>
This is what I'm trying to do
I'd suggest:
$(selector).click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
With regards to the comment left by moonwave99 (below), if you only want to remove the selected class-name from those elements contained within the same parent element:
$(selector).click(function(){
var that = $(this);
that.parent().find('.selected').removeClass('selected');
that.addClass('selected');
});
Though it's worth remembering what element you're clicking, and what the parent will be, for example, clicking on the a in the following HTML:
<ul>
<li>link text</li>
</ul>
Will look within the li for the other .selected elements, and so you should use:
$(selector).click(function(){
var that = $(this);
that.closest('ul').find('.selected').removeClass('selected');
that.addClass('selected');
});
First remove selected class from all li inside ul and then apply class to clicked li.
$('ul li').click(function(){
$('ul li').removeClass('selected');
$(this).addClass('selected');
});
On my travels I discovered that it is not possible to addClass of 'active' to list items in when using bootstrap. So if you are reading this (as I was) wondering why this doesn't work when the classname is 'active' you need to choose something else.
I have a CMS generating a basic navigation using a UL. Each first-level LI is styled to be a group. I need to apply a style to the last element within each of the first level LI "groups". Meaning; if a first-level LI has no children, I want to apply a style to it (as the "bottom" of the group); if it does have children, I want to find the last child OR grandchild element that appears (again, the "bottom" of the group). I have used both CSS and Javascript "last" classes, and have successfully applied styles to the last child of a certain depth within the first-level LI, but that isn't helpful since the bottom button of the list is of an unknown depth.
My line of thinking involves a IF statement that finds the last child of the first level, checks if it has children, and if it does, go another level deep and find that last child and checks for children, repeating this process until it finds the last LI that does not have children within the first-level LI groups. However, I am a JS noob and am not sure how to go about that.
I am open to CSS or JavaScript/jQuery solutions. I have been banging my head on this one for a while and appreciate any input or better ideas. Thanks for your help!!
--
Update: here's a code sample of what I am hoping for:
<ul id="navigation>
<li>Item one</li> <!--Style this one-->
<li>Item Two
<ul>
<li>Item Two-One</li>
<li>Item Two-Two</li> <!--Style this one-->
</ul>
<li>
<li>Item Three
<ul>
<li>Item Three-One</li>
<li>Item Three-Two
<ul>
<li>Item Three-Two-One</li>
<li>Item Three-Two-One</li> <!--Style this one-->
</ul>
</li>
</ul>
<li>
<li>Item Four
<ul>
<li>Item Four-One</li>
<li>Item Four-Two
<ul>
<li>Item Four-Two-One</li>
<li>Item Four-Two-One</li>
</ul>
</li>
<li>Item Four-Three</li> <!--Style this one-->
</ul>
<li>
</ul>
The reason the .last selector doesn't work is because, in the above example, it would style item Four-Two-One since it is the last element of its UL.
To clean up my answer, incase this is read at a later date.
here is my solution to your problem:
var checkChildren = function($this) {
if (!$this.children().length) {
$this.css({
color: '#f00',
fontWeight: '700',
textDecoration: 'underline'
});
return false;
}
return true;
};
$("#navigation").children("li").each(function() {
$these = $(this);
while (checkChildren($these)) {
$these = $these.children().last() || $these.next();
}
});
I think this is what you want. It's part of the jQuery API.
http://api.jquery.com/last/
HTML
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery
$('li').last().css('background-color', 'red');
EDIT:
Okay I figured out a way for you to do it.. the only caveat is that you need to be able to set a class for the first level of <li>'s. I've posted my findings here:
http://jsfiddle.net/TTXch/54/
It selects the last of the <li>'s for each main navigation element. Your posted structure was a little off... the end tags didn't all match up. Anyway, check out the jQuery in the javascript window in the jsFiddle.
You should be able to use the jQuery last selector for this (http://api.jquery.com/last-selector/).