jQuery 切换（单击以显示一个 div 并隐藏其他 div）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11769270/
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 (Click to show one div while hiding others)
提问by walker2238
The basic idea is that I have a bunch of div's in which each can be toggled (show/hide).
基本思想是我有一堆 div，其中每个都可以切换（显示/隐藏）。
When one div is toggled I'd like for other div's that are currently being shown to hide, thus only allowing one single div to be shown at a time.
当一个 div 被切换时，我希望当前显示的其他 div 隐藏，因此一次只允许显示一个 div。
In addition I'd like to be able to click outside the element to hide the open div as well.
此外，我还希望能够在元素外部单击以隐藏打开的 div。
Just to make things clearer I provided an example which currently does everything I want except closing a div when opening another (Only one div open at a time functionality):
为了让事情更清楚，我提供了一个示例，该示例当前可以完成我想要的所有操作，除了在打开另一个 div 时关闭一个 div（一次只打开一个 div 功能）：
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$("div.dropdown-container", $dropdown).toggle();
return false;
});
});
$('html').click(function(){
$("div.dropdown-container").hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>采纳答案by Explosion Pills
You basically just need to hide all divs except the one being toggled:
您基本上只需要隐藏除被切换的 div 之外的所有 div：
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.dropdown-container", $dropdown);
$div.toggle();
$("div.dropdown-container").not($div).hide();
return false;
});
});
$('html').click(function(){
$("div.dropdown-container").hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>回答by SantoshK
You can use by smart and easy way to implement by using below code :
您可以使用以下代码通过智能和简单的方式来实现：
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
$(document).ready(function(){
$(".dropdown-link").click(function(){
$(".dropdown-container").slideUp('slow')
$(this).closest('.dropdown').find('.dropdown-container').slideDown('slow');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>Working example Link : http://jsfiddle.net/NFTFw/1901/
工作示例链接：http: //jsfiddle.net/NFTFw/1901/
回答by undefined
Try the following:
请尝试以下操作：
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
回答by Dom
I made it as short as possible! Happy coding!
我把它做得尽可能短！快乐编码！
$(document).ready(function(){
$(document).on("click", "a", function(event){
$(this).siblings().show()
$(this).parent().siblings().each(function(index,element){
$(element).find(".dropdown-container:visible").hide();
});
});
});
回答by Akam
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$("div.dropdown-container").hide();
if($("div.dropdown-container", $dropdown).hide()){
$("div.dropdown-container", $dropdown).show();
}else{
$("div.dropdown-container", $dropdown).hide();
}
return false;
});
});
$('html').click(function(){
$("div.dropdown-container").hide();
});
});
回答by Matthew Blancarte
This code should do the trick, without the use of additional libraries. :)
此代码应该可以解决问题，而无需使用其他库。:)
$(document).ready(function(){
var dd = $(".dropdown-container");
$("a.dropdown-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
dd.hide();
$(this).next().show();
});
$(document).click(function() {
dd.hide();
});
dd.click(function(e) {
e.stopPropagation();
});
});
回答by Henrik Volckmer
Here you go:
干得好：
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$(".dropdown-container").hide();
$("div.dropdown-container", $dropdown).toggle();
return false;
});
Note the added line:
请注意添加的行：
$(".dropdown-container").hide();
We just hide all the things before toggling the div we want.
我们只是在切换我们想要的 div 之前隐藏所有的东西。
