嘿伙计们,我希望能够在点击时在“CLICK ME”文本后面添加背景,因此它会一直保持活动状态,直到被点击为止。我目前有一个幻灯片和切换格式,这里显示,但我无法弄清楚我可以在当前脚本中添加另一个活动类的位置。
http://jsfiddle.net/schermerb/rAMQT/
<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;
}
.below {
background:red;
}
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
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();
});
});
答案 0 :(得分:1)
这样做: 将活动类添加到单击的元素中。 并且当slideToggle完成删除此类时;
的Javascript
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
var self = this;
$(this).addClass("active");
$(this).next('.below').slideToggle(function(){
$(self).removeClass("active");
});
return false;
});
//register the handler to button element inside .below
$('.below .close').on('click', function () {
var self = this;
$(this).addClass("active");
//find the ancestor .below element of the clicked button
$(this).closest('.below').slideToggle(function(){
$(self).removeClass("active");
});
});
});
的CSS
.active {
background-color: blue;
}
答案 1 :(得分:1)
您可以切换活动类:
在你的JS:(注意$(this).toggleClass('active')行)
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
CSS:
.toggleBtn.active{
background:blue;
}
答案 2 :(得分:1)
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
if ( $( this ).hasClass( 'active' )){
$(this).removeClass('active');
}else{
$(this).addClass('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();
});
});
以下是JSFIDDLE及其工作代码