javascript jQuery 切换 - 关闭除此之外的所有内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4656941/
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 - Close all except this
提问by Jens T?rnell
I have found this code (jQuery):
我找到了这个代码（jQuery）：
$('.toggle').click(function() {
$('.container').eq($(this).index()).toggle('fast');
});
This is my HTML:
这是我的 HTML：
<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>
CSS
CSS
.container {
display: none;
}
I can toggle what I want with it.
我可以用它来切换我想要的。
The problem
问题
When I click the toggle-class I want to close all open container-classes BUT NOT the current container-class (because it should be toggled).
当我单击切换类时，我想关闭所有打开的容器类，但不是当前的容器类（因为它应该被切换）。
The current container-class should toggle. That means that all elements could be closed BUT ONLY ONE could be opened at the same time.
当前容器类应该切换。这意味着可以关闭所有元素，但只能同时打开一个元素。
I tried to just put jQuery hide before the script but that makes the container-class impossible to close (because when toggle hide is equal to show).
我试图将 jQuery hide 放在脚本之前，但这使得容器类无法关闭（因为当切换隐藏等于显示时）。
Code guesshide all .container except this
代码猜测隐藏除此之外的所有 .container
采纳答案by Yi Jiang
Using David's answeras a starting point, we can use .siblingsto accomplish what you want:
以大卫的回答为起点，我们可以用它.siblings来完成你想要的：
$('.toggle').click(function() {
var index = $(this).index();
$('.container').eq(index).toggle().siblings('.container').hide();
});
See: http://www.jsfiddle.net/85zCp/
见：http: //www.jsfiddle.net/85zCp/
As an aside, you might want to use JavaScript to hide all elements initially instead of CSS because users with JavaScript disabled won't be able to see any content if you use CSS to hide them. Also, you would probably want to have each h4heading in front of the contents instead of it put together like you're doing right now.
顺便说一句，您可能希望最初使用 JavaScript 而不是 CSS 来隐藏所有元素，因为如果您使用 CSS 隐藏它们，禁用 JavaScript 的用户将无法看到任何内容。此外，您可能希望将每个h4标题放在内容前面，而不是像您现在所做的那样将它们放在一起。
回答by Padel
$('.toggle').click(function () {
$('.container').hide('fast');
$('.container').eq($(this).index()).show('fast');
});
$('.toggle').click(function () {
$('.container').hide('fast');
$('.container').eq($(this).index()).show('fast');
});
I don't know exactly but I think this is what you're looking for...
我不知道确切，但我认为这就是你要找的......
Cheers...
干杯...
回答by David says reinstate Monica
This is a little verbose, but its use should be fairly obvious:
这有点冗长，但它的用途应该是相当明显的：
$('.toggle').click(
function(){
var index = $(this).index();
$('.container').hide().eq(index).show();
});
