选择选定元素之后的元素答案

【问题标题】：Selecting elements following a selected element选择选定元素之后的元素
【发布时间】：2014-06-10 01:25:11
【问题描述】：

我正在使用 jQuery 创建自定义手风琴菜单。

我想要完成的是：如果 ul 中的 ul（例如图像中的第 39 行）设置为显示... 我想将指定 div 内的所有 ul 标记元素 FOLLOWING 更改为不显示

.next() 或 .nextAll() 运气不好

代码示例

<div id="wrapper"> 
  <ul class="a-menu">
    <li>
        Main menu 1
        <ul>
            <li>Sub 1 menu 1</li>
            <li>Sub 1 menu 2</li>
        </ul>
    </li>
    <li>
        Main menu 2
        <ul>
            <li>
                Sub 2 menu 1
                <ul>
                    <li>Sub 3 menu 1</li>
                    <li>Sub 3 menu 2</li>
                    <li>Sub 3 menu 3</li>
                </ul>
            </li>

            <li>
              Sub 3 menu 2
              <ul>
                <li> Sub 3 menu 1</li>
                <li> Sub 3 menu 2</li>
              </ul>
            </li>

            <li>Sub 3 menu 3 </li>
        </ul>
    </li>
    <li>
      Main menu 3
      <ul>
        <li>Sub 1 menu 1</li>
        <li>Sub 1 menu 2</li>
      </ul>
    </li>
  </ul>

</div>

【问题讨论】：

漂亮的截图顺便说一句.. :)
如何设置ul元素显示？你点击一个按钮吗？在您的示例中，您的意思是 ul 第 48 行也会显示吗？
@FelixKling - 它在问题中说得对，它是 DIV 内的任何东西，无论它在哪里？
@adeneo：显然我看不懂。
本例中 DIV 的使用是作为一种机制来限制之后的所有内容的范围...“之后的每个元素”意味着...在这种情况下，每个 UL 和所有内容包含在其中。我不认为如何更改子元素以显示是相关的。但如果是，它们会更改为通过 jQuery 显示以响应单击（或鼠标悬停）。

标签： jquery jquery-selectors

【解决方案1】：

想通了！

jQuery

$("document").ready(function() {
  $('li').click(function(ev) {
      $(this).find('>ul').slideToggle();
      ev.stopPropagation();
      $(this).nextAll("li").toggleClass("hidden");
  });
});

CSS

.hidden {
    display: none;
}

【讨论】：