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

您应该只隐藏UL的兄弟h3，因此请将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

另一个建议：

将一个类添加到“main”<ul>（例如：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>

仅对此类应用css隐藏规则：
```
ul.section {
    display: none;
}
```

你的javascript处理程序应该可以工作：

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

jQuery $（this）.nextUntil（'h3'）。toggle（）; - ul内隐藏的ul

3 个答案: