所以现在,我有一个基本的幻灯片和切换脚本,现在在点击时添加了背景。但是,我希望这样,当单击另一个“CLICK ME”时,它会关闭该 div 并打开新的 div。本质上,我不希望切换的 div 不断相互重叠。
http://jsfiddle.net/schermerb/rAMQT/6/
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
.toggleBtn {
font:14px noral Futura, sans-serif;
color:black;
margin:50px;
cursor:pointer
}
.below {
background:red;
}
.toggleBtn.active{
background:blue;
}
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle();
});
});