找到没有id或类的元素的子元素

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点击事件，以便每次都删除正确孩子的班级“隐藏”？

Answer 1

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

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

DEMO

Answer 2

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

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

Answer 3

不要总是做人群告诉你的事情，至少要考虑一段时间！

我敢打赌人们会建议您使用ul.menu > li这样的选择器，但请记住，当您点击文本＆＃34;主菜单＆＃34;时，这不仅会触发点击事件，当您点击匹配的li内的任何其他内容时。

如果你想实现一个显示/隐藏切换，你最好不要包装文本＆＃34;主菜单＆＃34;在元素内部，然后使用下面的内容来改变你可能想要改变的内容。

$(<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处于同一范围的标签）匹配{{ 1}}将删除.hide。

的Javascript

class="hide"

HTML 的

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

---

Answer 4

看看child selectors。我想这就是你想要的。

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