javascript - 将点击监听器附加到类以切换所有子级的可见性

Question

当我单击“标题文本”时，<ol>元素不会隐藏，而且应该。我已经检查了 .click() .children() .toggle() 和 .hide() 上的 jquery 文档(并进行了搜索)，但我找不到任何我做错的事情。我在http://codepen.io工作环境。

我的 HTML

<p class="hidable">title text
  <ol>
    <li>item</li>
    <li>item</li>
  </ol>
</p>

我的 JavaScript

$(document).ready(function() {
  $('.hidable').click(function() {
    $(this).children().toggle();
  });
});

Answer 1

段落只能包含内联元素。

你的<ol>在哪里是一个 block 元素，当您的浏览器呈现您的代码时，它会在有序列表的两侧放置一个段落，有序列表不是该段落的子元素:

将列表放在段落后面怎么样:

$(document).ready(function () {
    $('.hidable').click(function () {
        $(this).next('ol').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<p class="hidable">title text</p>
<ol>
    <li>item</li>
    <li>item</li>
</ol>