I need to apply a jQuery.click to the first level items only. How do I do that?
Here is my list:
<ul id="adminMenu">
<li id="A">
<h3><a href="">Item 1</a></h3>
</li>
<li id="B">
<h3>Item 2</h3>
<ul style="display: block;">
<li id="a1"> Sub Item 1 </li>
<li id="a2"> Sub Item 2 </li>
<li id="a3"> Sub Item 3 </li>
</ul>
</li>
<li id="C">
<h3>Item 3</h3>
<ul style="display: none;">
<li> Sub Item 4 </li>
<li> Sub Item 5 </li>
</ul>
</li>
</ul开发者_StackOverflow中文版>
And here is the jQuery
jQuery('#adminMenu > li').click(function(){
alert('test');
});
UPDATE
The Alert should not fire when I click a Sub Menu item, only when I click list item A, B or C.SOLUTION 1
This is working code based on Marcels suggestion. jQuery('#adminMenu > li > h3').click(function(e) {
var activeUL = jQuery("#adminMenu > li ul:visible");
var activeLI = jQuery("#adminMenu > li ul:visible").parent('li:first');
var clicked = jQuery(this).parent('li:first');
// Close submenu
activeUL.hide('fast');
// Open submenu
if( activeLI.attr('id') != clicked.attr('id') )
clicked.children('ul').show('fast');
});
SOLUTION 2
This is working code based on Eyelids suggestion. jQuery('#adminMenu > li').click(function(e) {
var clicked = jQuery(e.target);
// Ensure we're checking which list item is clicked,
// other children should be allowed
if(!clicked.is('li') && clicked.parents('li').length > 0) {
// :first ensures we do not select higher level list items
clicked = clicked.parents('li:first');
}
// If clicked list item is a child of another list item, we'll exit here
if(!clicked.is('#adminMenu > li')) {
return;
}
var activeUL = jQuery("#adminMenu > li ul:visible");
var activeLI = jQuery("#adminMenu > li ul:visible").parent('li:first');
// Close submenu
activeUL.hide('fast');
// Open submenu
if( activeLI.attr('id') != clicked.attr('id') )
clicked.children('ul').show('fast');
});
Thanks guys! I would never have managed this without your help! :)
jQuery('#adminMenu > li').click(function(e) {
var clicked = jQuery(e.target);
// Ensure we're checking which list item is clicked,
// other children should be allowed
if(!clicked.is('li') && clicked.parents('li').length > 0) {
// :first ensures we do not select higher level list items
clicked = clicked.parents('li:first');
}
// If clicked list item is a child of another list item, we'll exit here
if(!clicked.is('#adminMenu > li')) {
return;
}
alert('test');
});
Updated to exit if clicked list item is not an immediate descendant of #adminMenu
.
The issue is, that you add the click to the whole LI (which includes all childs etc). You have to "clickify" the labels only, so use:
jQuery("#adminMenu > li > h3").click(...);
Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
children( [expr] )
http://docs.jquery.com/Traversing/children
jQuery('#adminMenu').children('li').children('h3').click(function()
{
alert('test');
});
$('.adminMenu>li').not(":has(ul)").on('click',function(e){
alert('test');
});
jQuery('#adminMenu li:first').
精彩评论