Jquery 切换 - 在多个 div 上展开/折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6467139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery toggle - expand / collapse on multiple divs
提问by user1231561
I recently found some very easy to use Jquery code, which basically toggles and div visible and not visible.
我最近发现了一些非常好用的Jquery代码，基本上可以切换和div可见和不可见。
The code is working on the first div - but lets say I have multiple with the same structure listing down, and I want the toggle to work on the specific second or third div im clicking.
代码在第一个 div 上工作 - 但假设我有多个具有相同结构的列表，并且我希望切换在单击时在特定的第二个或第三个 div 上工作。
Im wondering if it's possible to expand the following code to be dynamic for that.
我想知道是否可以将以下代码扩展为动态的。
Example with two divs (only first one will work):
带有两个 div 的示例（只有第一个可以工作）：
<a id="toggle" href="javascript:void(0);">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>
<br><br>
<a id="toggle" href="javascript:void(0);">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>
Jquery:
查询：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() // run after page loads
{
$("#toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$("#content, #contentHidden").toggle();
});
});
回答by David
First, an Id should be unique on each DOM tree object. (multiple div with id="toggle" would eventually work but is not recommanded. Prefer the class attribute in this case.)
首先，每个 DOM 树对象上的 Id 应该是唯一的。（带有 id="toggle" 的多个 div 最终会起作用，但不推荐使用。在这种情况下更喜欢 class 属性。）
for your problem I suggest :
对于您的问题，我建议：
<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div class="content">Content 1</div>
<div class="contentHidden" style="display:none;">Hidden 1</div>
<br><br>
<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div class="content">Content 2</div>
<div class="contentHidden" style="display:none;">Hidden 2</div>
and the jQuery code :
和 jQuery 代码：
$(function()
{
$(".toggle").click(function()
{
// hides children divs if shown, shows if hidden
$(this).children("div").toggle();
});
});
回答by PeeHaa
First: you can't use the same id (toggle) multiple times.
第一：您不能多次使用相同的 ID（切换）。
<a class="toggle" href="#">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>
<br><br>
<a class="toggle" href="#">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>
$('.toggle').click(function() {
var content = $(this).next();
$(content).toggle();
$(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it's a matter of taste
return false;
});
I've changed toggle idto classsince it is not valid HTML to re-use the same id on the page. Id's must be unique.
我已将切换更改id为，class因为在页面上重新使用相同的 id 是无效的 HTML。ID 必须是唯一的。
.next()selects the next dom element (sister) in the tree
.next()选择树中的下一个 dom 元素（姐妹）
回答by Alex
The id attribute should be unique. You need to change it to a class:
id 属性应该是唯一的。您需要将其更改为一个类：
$(function() // run after page loads
{
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().toggle();
return false;
});
});
<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div>Content 1</div>
<div style="display:none;">Hidden 1</div>
<br><br>
<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div>Content 2</div>
<div style="display:none;">Hidden 2</div>
回答by Nicola Peluchetti
Fist of all you must not use ids more than once: in this case only one works because the event is attached only on the first matching id.
首先，您不能多次使用 id：在这种情况下，只有一个有效，因为该事件仅附加在第一个匹配的 id 上。
Anyway you could do like this:(http://jsfiddle.net/7Kmny/)
无论如何你可以这样做:(http://jsfiddle.net/7Kmny/)
<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>
<br><br>
<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().toggle();
});
回答by Dim_K
It works only with first div because id must be unique on page. You should use classes to work with multiple tags.
它仅适用于第一个 div，因为 id 在页面上必须是唯一的。您应该使用类来处理多个标签。
<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div>
<div class="content">Content 1</div>
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<br><br>
<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div>
<div class="content">Content 2</div>
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>
Jquery:
查询：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() // run after page loads
{
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(".content, .contentHidden", $(this).next()).toggle();
});
});
