如何将jQuery.click仅应用于第一级项目? [英] How can I apply jQuery.click to first level items only?

问题描述

我只需要将jQuery.click应用于第一级项目.我该怎么办?

I need to apply a jQuery.click to the first level items only. How do I do that?

这是我的清单:

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

这是jQuery

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

更新
单击子菜单项时，仅当单击列表项A，B或C时，警报应该不触发.

UPDATE
The Alert should not fire when I click a Sub Menu item, only when I click list item A, B or C.

解决方案1 ​​
这是基于Marcels建议的工作代码.

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

解决方案2
这是基于Eyelids建议的工作代码.

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

如果单击的列表项不是#adminMenu的直接后代，则更新以退出.

Updated to exit if clicked list item is not an immediate descendant of #adminMenu.

这篇关于如何将jQuery.click仅应用于第一级项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！