jQuery切换(单击可显示一个div,而隐藏其他div) [英] jQuery toggle (Click to show one div while hiding others)
问题描述
基本思想是我有一堆div,每个div都可以切换(显示/隐藏).
The basic idea is that I have a bunch of div's in which each can be toggled (show/hide).
切换一个div时,我希望当前显示的其他div隐藏,因此一次只能显示一个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.
In addition I'd like to be able to click outside the element to hide the open div as well.
为了使事情更清楚,我提供了一个示例,该示例当前可以执行我想要的一切,除了打开另一个div时关闭一个div(一次打开一个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):
$(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>
推荐答案
您基本上只需要隐藏所有div,除了要切换的div:
You basically just need to hide all divs except the one being toggled:
$(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>
这篇关于jQuery切换(单击可显示一个div,而隐藏其他div)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!