将单击侦听器附加到类以切换所有子项的可见性

Question

当我点击＆＃34;标题文字＆＃34;时，<ol>元素不会隐藏，它应该。我在.click（）。children（）。togog（）和.hide（）上检查了jquery文档（并搜索了SO），我找不到任何我做错的事。我在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>是一个块元素，当您的浏览器呈现您的代码时，它会在您的有序列表的任一侧放置一个段落，有序列表不是段落的子项：

如何让列表遵循以下段落：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;