Comment puis-je appliquer jQuery.click uniquement aux éléments de premier niveau?

Question

Je dois appliquer un jQuery.click uniquement aux éléments de premier niveau. Comment je fais ça?

Voici ma liste:

<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> 

Et voici le jQuery

jQuery('#adminMenu > li').click(function(){ 
    alert('test'); 
}); 

MISE À JOUR
L'alerte devrait pas feu lorsque je clique sur un élément sous menu, uniquement lorsque Je clique sur la liste A, B ou C.

SOLUTION 1
Ce code est basé sur la suggestion de Marcels.

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
C'est le code de travail basé sur la suggestion de Paupières.

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'); 
    }); 

Merci les gars! Je n'aurais jamais réussi ça sans ton aide! :)

Answer 1

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'); 
}); 

Mise à jour pour quitter si un élément de liste est cliqué pas un descendant immédiat de #adminMenu.

Answer 2

jQuery('#adminMenu li:first'). 

Answer 3

Le problème est que vous ajoutez le clic à l'ensemble LI (qui comprend tous les enfants, etc). Vous devez « clickify » les étiquettes seulement, utilisez donc:

jQuery("#adminMenu > li > h3").click(...); 

Answer 4

obtenir un ensemble d'éléments contenant tous les enfants immédiats uniques de chacun de l'ensemble assorti d'éléments.

enfants ([expr])

http://docs.jquery.com/Traversing/children

jQuery('#adminMenu').children('li').children('h3').click(function() 
    { 
     alert('test'); 
    });