为什么这个jQuery列表切换代码不起作用？

ha5z0ras 于 2023-03-17 发布在 jQuery

关注(0)|答案(4)|浏览(105)

我完全不知道为什么这个代码不工作：

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Tea</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Milk</li>
  <li>Cool</li>
</ol>

例如，如果你点击“咖啡”，那么下级列表应该折叠出来。是不是有一点小错误？很遗憾，我找不到它。

jquery

来源：https://stackoverflow.com/questions/75679725/why-does-this-jquery-list-toggle-code-not-work

4条答案

按热度按时间

6ojccjat1#

您的ol不是您正在单击的li的子项-您需要将标记更改为：

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea  
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

赞(0）回复(0）举报 2023-03-17

lhcgjxsq2#

需要将ol放入li中

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    Coffee
    <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Tea
   <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

赞(0）回复(0）举报 2023-03-17

dced5bon3#

因为您的ol不是li的子级。

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

或者你可以改变你的js，使用next('ol')选择你点击的li后面的ol。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Tea</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  <li>Milk</li>
  <li>Cool</li>
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
</ol>

<script>
  $(document).ready(function() {
    $('ol ol').hide();
    $('li').click(function() {
      $(this).next('ol').toggle();
    });
  });
</script>

赞(0）回复(0）举报 2023-03-17

3htmauhk4#

$(document).ready(function() {
  $('ol ol').hide();
  $('li').click(function() {
    $('ol ol').hide();
    $(this).children('ol').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    Coffee
    <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Tea
   <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

尝试此代码打开一个在时间一liol.

赞(0）回复(0）举报 2023-03-17

我来回答

为什么这个jQuery列表切换代码不起作用？

4条答案

相关问题

热门标签

最新问答