基本的想法是我有一堆div，其中每个都可以切换（显示/隐藏）。
当切换一个div时，我想要显示当前显示隐藏的其他div，因此一次只能显示一个div。
此外，我希望能够在元素外部单击以隐藏open 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>
答案 0 :(得分：9)
你基本上只需要隐藏所有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>
答案 1 :(得分：2)
尝试以下方法：
$(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();
}
});
});
答案 2 :(得分：2)
我尽可能地缩短了！快乐的编码！
$(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();
});
});
});
答案 3 :(得分：2)
您可以使用以下代码以智能且简单的方式实现：
<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>
答案 4 :(得分：0)
此代码应该可以解决问题，而无需使用其他库。 ：）
$(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();
});
});
答案 5 :(得分：0)
你走了：
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$(".dropdown-container").hide();
$("div.dropdown-container", $dropdown).toggle();
return false;
});
请注意添加的行：
$(".dropdown-container").hide();
我们只是在切换我们想要的div之前隐藏所有内容。
答案 6 :(得分：0)
$(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();
});
});