我想使用 JavaScript 进行非常简单的展开/折叠，当我单击“标题”时，它会显示“文本”（页面首次加载时隐藏）。此外，当我再次单击“标题”时，我希望再次隐藏“文本”。
<div>
<h1>Title</h1>
<p>Text</p>
</div>
我以前从未使用过 jQuery 或 JavaScript，所以如果您能稍微解释一下此切换代码的工作原理，那就太好了。谢谢。
【问题讨论】：
标签： javascript jquery html css
嗯，应该这样做：
$(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>
干杯！
【讨论】：
<h1> 后切换<p>，而不是文档中的所有<p>s。
$(this).find("p:eq(1)").toggle();
使用toggle。
$('h1').bind('click', function(){
$('p').toggle();
});
【讨论】：
标签
<h1>。
<head>
<!-- other content, including jQuery script tag -->
<script type="text/javascript">
$(function(){ // trigger when document's ready
// hide the pragraph initially
$('p').hide();
// add a click event to the header so we can hide/show the paragraph
$('h1').click(function(e){
// $(this) is the header, next finds the next paragraph sibling (they're both
// withint he div, so the header and div are known as siblings) then toggle
// toggles if this found paragraph should be shown or hidden
$(this).next('p').toggle();
});
});
</script>
</head>
单击 DIV 会指示 jQuery 查找作为段落的“下一个”元素（因为标题和段落是同一节点的兄弟姐妹）然后 toggles 它。
我还在代码中添加了隐藏，因为在我看来，最好从 javascript 中隐藏内容，这样即使它们不支持 javascript，也不会丢失任何内容。其他人使用 CSS 样式，只使用 javascript 显示，这很好，但如果他们在页面上没有或禁用 JS，则无法再次查看该内容。
【讨论】：
但如何使
？我要添加 吗？如果是这样，我将其链接到什么？
试试这个
$("h1").click(function(){
$("p").slideToggle(500);
});
【讨论】：
标签