Javascript 扩展<；p>；何时<；h1>；点击

我想用JavaScript做一个非常简单的展开/折叠，当我点击“Title”时，它会显示“Text”（当页面第一次加载时它是隐藏的）。此外，当我再次点击“标题”时，我希望“文本”再次被隐藏

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

标题
正文

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

请使用

使用

---

这应该可以做到：

$(function() {

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

});

现在让我解释一下代码

第一行接受一个函数，该函数将在文档加载完成后运行。这相当于：

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

中间的代码表示，对于每一个<代码> H1 元素，当它被点击时，执行一个函数，该函数在它旁边找到<代码> P<代码>元素，并切换它的可见性。第一个选择器中的

this

引用实际的

DOM元素。我是这样做的，所以如果你有如下的结构，切换只会影响段落旁边的内容

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

第一节
第一节内容

第二节
第2节内容

---

干杯

这应该可以做到：

$(function() {

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

});

现在让我解释一下代码

第一行接受一个函数，该函数将在文档加载完成后运行。这相当于：

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

中间的代码表示，对于每一个<代码> H1 元素，当它被点击时，执行一个函数，该函数在它旁边找到<代码> P<代码>元素，并切换它的可见性。第一个选择器中的

this

引用实际的

DOM元素。我是这样做的，所以如果你有如下的结构，切换只会影响段落旁边的内容

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

第一节
第一节内容

第二节
第2节内容

干杯

试试这个

$("h1").click(function(){
    $("p").slideToggle(500);
});

试试这个

$("h1").click(function(){
    $("p").slideToggle(500);
});

$（函数（）{//在文档准备就绪时触发
//最初隐藏pragraph
$（'p'）.hide（）；
//在标题中添加单击事件，以便隐藏/显示段落
$（'h1'）。单击（函数（e）{
//$（这）是标题，下一个查找下一个段落的同级（它们都是
//在div中，因此标题和div称为同级），然后切换
//切换是否显示或隐藏找到的段落
$（this.next（'p'）.toggle（）；
});
});

单击DIV指示jQuery查找作为段落的“next”元素（因为标题和段落是同一节点的同级元素），然后切换它

我还在代码中添加了一个隐藏，因为在我看来，最好在javascript中隐藏内容，这样在他们不支持javascript的情况下，就不会丢失任何内容。其他人使用CSS样式，只使用javascript显示，这很好，但如果他们没有或禁用页面上的JS，就无法再次查看该内容。

$（函数（）{//在文档准备就绪时触发
//最初隐藏pragraph
$（'p'）.hide（）；
//在标题中添加单击事件，以便隐藏/显示段落
$（'h1'）。单击（函数（e）{
//$（这）是标题，下一个查找下一个段落的同级（它们都是
//在div中，因此标题和div称为同级），然后切换
//切换是否显示或隐藏找到的段落
$（this.next（'p'）.toggle（）；
});
});

单击DIV指示jQuery查找作为段落的“next”元素（因为标题和段落是同一节点的同级元素），然后切换它

---

我还在代码中添加了一个隐藏，因为在我看来，最好在javascript中隐藏内容，这样在他们不支持javascript的情况下，就不会丢失任何内容。其他人使用CSS样式，只使用javascript显示，这很好，但如果他们没有或禁用页面上的JS，就无法再次查看该内容。

+1与其他答案不同，这只会在单击

后切换

，而不是在文档中切换所有

。$（此）。查找（“p”）.toggle（）将在h1$（this.find（“P”）.eq（1）.toggle（）下找到所有的P标记，我认为$（this.find（“P:first”）.toggle（）是另一个选项alternative@kasdega：您可以将其压缩为

$（this.find（“p:eq（1）”）.toggle（）+1与其他答案不同，它只在单击
后切换
，而不是文档中的所有
。$（this.find（“p”）.toggle（）将查找h1$（this.find（“p”）.eq（1）下的所有p标记。toggle（）我认为$（this.find（“p:first”）.toggle（）将是另一种选择另一个alternative@kasdega：您可以将其压缩为
$（this.find（“p:eq（1）”）.toggle（）这将查找并切换页面上的所有
标记。根据标记，这只是一个指针。他必须相应地编码。这将查找并切换页面上的所有
标记。根据他的标记，这只是一个指针。他必须相应地编码。这将查找并切换页面上的所有
标记。并将绑定到每个
。这将查找并切换页面上的所有
标记。并将绑定到每个
。感谢大家的回答。我真的很感谢你的帮助。谢谢大家的回答。我真的很感谢你的帮助。谢谢你的回答。它似乎隐藏了，但我如何使其可点击，以便扩展？我要补充吗？如果是，我应该把它链接到什么？谢谢你的回答。它似乎隐藏了，但我如何使其可点击，以便扩展？我要补充吗？如果是，我应该将其链接到什么？