我需要 jQuery 脚本:
- 默认情况下仅显示一个事件 div,其他 div 将隐藏
- 此时只有一个处于事件状态(如果单击新隐藏的 div -> 它会打开,当前打开的 div 将关闭)
我有一些代码和演示:
HTML
<div class="toggle">Content</div>
<div class="hidden hide">Content</div>
<div class="toggle">Content</div>
<div class="hidden show">Content</div>
CSS
.toggle {width:398px; height:48px; cursor: pointer; border: 1px solid #000}
.hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}
.hide {display:none;}
.show {display:block;}
JavaScript
$(document).ready(function() {
$(".toggle").click(function() {
$('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
$(this).toggleClass('active').next().slideToggle("fast");
});
});
http://jsfiddle.net/kolxoznik1/C7W2D/
问题是,当打开新的 div 时,它不会正确关闭以前打开的 div。
最佳答案
使用此代码
$(document).ready(function() {
$(".toggle").click(function() {
$(".hidden").hide(); //to hide all
$(this).next().show(); //to show the one you clicked on
});
});
在这里查看它的工作http://jsfiddle.net/C7W2D/4/
关于jquery - 显示/隐藏 jQuery 脚本无法正确切换元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7128432/