[英]Change background of div when clicked/toggled
Hey guys I would like to be able to add a background behind the text "CLICK ME" when clicked, so it stays active until de-clicked. 嘿伙计们,我希望能够在单击时在“CLICK ME”文本后面添加背景,因此它会一直保持活动状态,直到被点击为止。 I currently have a slide and toggle format which is shown here, but I have been unable to figure out where I can add another active class within the current script. 我目前有一个幻灯片和切换格式,这里显示,但我无法弄清楚我可以在当前脚本中添加另一个活动类的位置。
http://jsfiddle.net/schermerb/rAMQT/ 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();
});
});
Do like this: Add an active class to the elment the clicked. 这样做:将活动类添加到单击的元素中。 and when the slideToggle complete remove this class; 并且当slideToggle完成删除此类时;
Javascript 使用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 CSS
.active {
background-color: blue;
}
You can toggle an active class: 您可以切换活动类:
In your JS: (note the $(this).toggleClass('active') line) 在你的JS中:( 注意$(this).toggleClass('active')行)
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
$(this).toggleClass('active');
return false;
});
CSS: CSS:
.toggleBtn.active{
background:blue;
}
$(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();
});
});
Here is the JSFIDDLE with the working code 这是带有工作代码的JSFIDDLE
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.