查找没有id或class的element的子元素

Question

我有以下代码结构：

<ul class='menu'>
    <li>
         Main Menu
         <ul class='hide'>
             <li>SubMenu1</li>
             <li>SubMenu2</li>
         </ul>
    </li>
    <li>
         Main2
         <ul class='hide'>
             <li>Sub1</li>
         </ul>
    </li>
</ul>

有没有一种方法可以让我以一种通用的方式在Main Menu和Main2上拥有一个jQuery click事件， Main Menu事件将每次都删除正确子级的类“隐藏”？

Answer 1

这是另一种使用事件委托的方法 ，仅在单击li元素而非其子元素时运行：

$('ul.menu').on('click', 'ul.menu > li', function(e) {
    if(e.target === this) {
        $(this).children('ul').toggleClass('hide');
    }
});

演示

Answer 2

$("ul.menu > li").on("click", function () {
    $(this).children("ul").removeClass("hide");
});

示例： http ： //jsfiddle.net/dpkBL/

Answer 3

不要总是按人群告诉你的做，至少要考虑一会儿！

我敢打赌，人们会建议您使用ul.menu > li类的选择器，但是请记住，这不仅会在单击文本“主菜单”时触发单击事件，而且还会在您单击任意一个菜单项时触发单击事件。 li内的其他内容。

如果要实现显示/隐藏切换，最好将“主菜单”文本包装在on元素内，然后使用以下内容来更改您想要更改的内容。

$(<main menu text selector>).siblings (<siblings selector>);

---

仍想/必须跟随人群吗？

如果是这种情况，我建议您至少稍作改动，以防止前面所述。

（ 编辑 ：阅读jquery文档中的元素后的修订版）

$('ul.menu > li').click (function(e){
  if (e.target === this) {
    $(this).children ('.hide').removeClass ('hide');
  }
});

 
 
 
 
  
  
  $("ul.menu > li").click (function () { $(this).find ('.hide').removeClass ('hide'); }); $("ul.menu > li > *").click (function () { return false; // prevent event from bubbling up });
 
 
  

---

推荐版本的示例实现

下面将结合一个点击事件监听器.menu-toggle ，当事件被触发的兄弟姐妹（即谁是在同一范围内点击了标签.menu-toggle ）匹配.hide将有自己的class="hide"已删除。

Java脚本

$(".menu-toggle").click (function () {
  $(this).siblings ('.hide').removeClass ('hide'); 
});

的HTML

<ul class='menu'>
    <li>
        <span class="menu-toggle">Main Menu</span>
         <ul class='hide'>
             <li>SubMenu1</li>
             <li>SubMenu2</li>
         </ul>
    </li>
    <li>
         <span class="menu-toggle">Main2</span>
         <ul class='hide'>
             <li>Sub1</li>
         </ul>
    </li> </ul> 

---

Answer 4

看一下子选择器 。 我想这就是你想要的。

$('.menu > li').click(function () { 
    $(this).children('ul').removeClass('hidden'); 
});