jQuery $(this).nextUntil('h3').toggle();- 隐藏在UL内部的UL

Question

我现在纠结了两天，如何为我的第一个项目切换特定内容(大约一周前开始编码，所以我是一个新手(。我已经搜索了其他主题并阅读了文章/完成的教程，它们帮助我朝着正确的方向前进，但我还没有到达那里。谁知道如何解决这个问题？

目标： 页面加载时，只有 h3 应该可见。当我点击 h3 时，我希望下一个 h3 之前的所有内容都切换(因此，ul 和"sub"ul(。

当前情况：列表项 1 和 2 切换，但子列表项未切换(它们保持隐藏状态(。

<div>
<h3>Heading</h3>
<ul>
<li>List item 1</li>
<ul>
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<li>List item 2</li>
<ul>
<li></li>
</ul>
</ul>
<h3>Next heading</h3>
...
</div>

这是jQuery代码：

$(document).ready(function() { 
$('h3').click(function() {
$(this).nextUntil('h3').toggle();
});
});

以及页面加载时隐藏 ul 的 CSS：

ul {
display: none;
visibility: inherit;
}

我认为问题出在我的 CSS 中(因为列表项 2 确实加载了(，但两天后我仍然无法修复它。谁能帮助我？

Answer 1

你应该只隐藏h3的同级UL，所以将CSS规则的选择器更改为

h3+ul {
display: none;
visibility: inherit;
}

$(document).ready(function() {
$('h3').click(function() {
$(this).nextUntil('h3').toggle();
});
});

h3+ul {
display: none;
visibility: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h3>Heading</h3>
<ul>
<li>List item 1</li>
<ul>
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<li>List item 2</li>
<ul>
<li></li>
</ul>
</ul>
<h3>Next heading</h3>
<ul>
<li>List item 4</li>
<ul>
<li>Sublist item 4</li>
<li>Sublist item 4</li>
</ul>
</ul>
</div>

正如@lonut所指出的，您应该将嵌套UL添加为LI的子项

Answer 2

Please try this one. 

$(document).ready(function() { 
$('h3').click(function() {
$(this).nextUntil('h3').toggle();
});
});

ul {
display: none;
visibility: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<h3>Heading</h3>
<ul>
<li>List item 1</li>
<ul>
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<li>List item 2</li>
<ul>
<li></li>
</ul>
</ul>
<h3>Next heading</h3>
<ul>
<li>List item 3</li>
<ul>
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<li>List item 4</li>
<ul>
<li></li>
</ul>
</ul>
</div>

Answer 3

另一个建议：

1. 将类添加到<ul>s 的 "main" (例如 ：section(，而不是在子元素上

   ：

   <div>
   <h3>First Heading</h3>
   <ul class="section">
   <li>List item 1</li>
   <ul>
   <li>Sublist item 1</li>
   <li>Sublist item 2</li>
   </ul>
   <li>List item 2</li>
   <ul>
   <li></li>
   </ul>
   </ul>
   <h3>Second heading</h3>
   <ul class="section">
   <li>List item 1</li>
   <ul>
   <li>Sublist item 1</li>
   <li>Sublist item 2</li>
   </ul>
   <li>List item 2</li>
   <ul>
   <li></li>
   </ul>
   </ul>
   <h3>Third heading</h3>
   ...
   </div>
   

2. 仅对此类应用您的 CSS 隐藏规则：

   ul.section {
   display: none;
   }
   

3. 你的JavaScript处理程序应该可以工作：

   $('h3').click(function() {
   $(this).nextUntil('h3').toggle();
   });