javascript - 单击

Question

我想使用 JavaScript 进行非常简单的展开/折叠，当我单击“标题”时，它会显示“文本”(在首次加载页面时隐藏)。此外，当我再次单击“标题”时，我希望“文本”再次隐藏。

<div>
    <h1>Title</h1>
        <p>Text</p>
</div>

我以前从未使用过 jQuery 或 JavaScript，所以如果您能稍微解释一下此切换代码的​​工作原理，那就太好了。谢谢。

Answer 1

好吧，应该这样做:

$(function() {

    $('h1').click(function() {
        $(this).next('p').toggle();
    });

});

那么现在让我解释一下代码。

第一行是接受一个函数，该函数将在文档完成加载时运行。它相当于:

$(document).ready(function() {
    // Stuff to do when the document is ready.
});

中间的代码表示，对于每个 h1元素，当它被点击时，执行一个找到 p 的函数它旁边的元素并切换其可见性。 this在第一个选择器中引用实际的 <h1> DOM 元素。我是这样做的，所以如果您有如下结构，切换只会影响段落旁边的内容。

<div>
    <h1>Section 1</h1>
    <p>Section 1 Content</p>
</div>
<div>
    <h1>Section 2</h1>
    <p>Section 2 Content</p>
</div>

干杯!