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

标签 javascript jquery html

当我单击“标题文本”时,<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();
  });
});

最佳答案

段落只能包含内联元素。

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

enter image description here

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

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

关于javascript - 将点击监听器附加到类以切换所有子级的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26493330/

相关文章:

javascript - HTML5 音频可视化?

javascript - JS向表单添加输入刷新页面不输入

html - 当包裹在 "block"元素中时,一切都消失了

html - 为什么跨度位于选择可点击的后面?

javascript - 如何使用 Uber 的 "react-map-gl"库绘制静态标记?

javascript - 将 npm 与 Vanilla js 一起使用

javascript - 添加到数组时新对象会被覆盖

javascript - 如何访问 JSON 对象中的数组?

jquery - 复杂的jquery语法我看不懂

javascript - 如何正确使用父元素