单击<h1>时展开<p>

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>

干杯!