扩张<p>什么时候</p><h1>被点击</h1>
[英]Expand <p> when <h1> is clicked
问题描述
I want to do a very simple expand/collapse using JavaScript where when I click "Title", it shows "Text" (which is hidden when the page first loads).
我想使用 JavaScript 进行非常简单的展开/折叠，当我单击“标题”时，它会显示“文本”（页面首次加载时隐藏）。 Furthermore, when I click on the "Title" again, I want "Text" to get hidden again.此外，当我再次单击“标题”时，我希望“文本”再次隐藏。
<div>
<h1>Title</h1>
<p>Text</p>
</div>
I've never used jQuery or JavaScript before so it would be great if you can explain just a little bit about how this toggle code works.我以前从未使用过 jQuery 或 JavaScript，所以如果您能稍微解释一下这个切换代码的工作原理，那就太好了。 Thanks.谢谢。
4 个解决方案
解决方案1
6 已采纳 2011-07-15 21:01:46
Well this should do it:那么这应该这样做：
$(function() {
$('h1').click(function() {
$(this).next('p').toggle();
});
});
So now let me explain the code.所以现在让我解释一下代码。
The first line is accepting a function that will run when the document has finished loading.第一行接受一个 function ，它将在文档完成加载时运行。 It is equivalent to:它相当于：
$(document).ready(function() {
// Stuff to do when the document is ready.
});
The code in the middle says, for every h1 element, when it gets clicked, execute a function that finds the p element next to it and toggle its visibility.中间的代码说，对于每个h1元素，当它被点击时，执行一个 function 找到它旁边的p元素并切换它的可见性。 The this in the first selector refers to the actual <h1> DOM element.第一个选择器中的this指的是实际的<h1> DOM 元素。 I did it this way so if you had a structure like the following, the toggling would only affect the content next to the paragraphs.我是这样做的，所以如果你有如下结构，切换只会影响段落旁边的内容。
<div>
<h1>Section 1</h1>
<p>Section 1 Content</p>
</div>
<div>
<h1>Section 2</h1>
<p>Section 2 Content</p>
</div>
Cheers!干杯!
解决方案2
1 2011-07-15 21:01:17
解决方案3
1 2011-07-15 21:03:05
<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>
Clicking on the DIV instructs jQuery to find the "next" element that's a paragraph (since the header and paragraph are siblings of the same node) then toggle s it.单击 DIV 会指示 jQuery 找到作为段落的“下一个”元素（因为 header 和段落是同一节点的兄弟）然后toggle它。
I've also added a hide in the code as, in my opinion, it's best to hide content from within javascript so in the event they don't support javascript, there's no missing content.我还在代码中添加了隐藏，因为在我看来，最好从 javascript 中隐藏内容，因此如果它们不支持 javascript，则不会丢失内容。 Others use CSS styles and only show with javascript, which is fine, but if they don't have or disable JS on the page, there's no way to view that content again.其他人使用 CSS styles 并且只显示 javascript，这很好，但如果他们在页面上没有或禁用 JS，则无法查看该内容。
解决方案4
0 2011-07-15 21:01:47
Try this尝试这个
$("h1").click(function(){
$("p").slideToggle(500);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.