在折叠bootstrap div时为div添加一个类

Question

如果在折叠bootstrap 3可折叠时将如何向div添加类？我需要一个代码，当div折叠时，它会添加类darken。当关闭可折叠时，应删除课程darken

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Answer 1

使用shown.bs.collapse和hidden.bs.collapse检查折叠/打开的时间：

$('#collapse1').on('shown.bs.collapse', function () {
   $("#content").addClass("darken")
});

$('#collapse1').on('hidden.bs.collapse', function () {
   $("#content").removeClass("darken")
});

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Answer 2

这里有纯CSS的解决方案

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

#collapse1.in + #content {
background: #EEE; 
color: #FFF; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Answer 3

使用CSS，并假设您想要变暗而不是特别需要添加.darken类：

.collapse.in + #content {
    background-color: #EEE;
}

其中+是adjacent sibling combinator。

Answer 4

＆＃13;

＆＃13;

Out1    Out2
6        9

＆＃13;

$( "#switch" ).click(function() {
  if($("#collapse1" ).hasClass("in")) {
    $("#content" ).removeClass("darken");
  } else {
    $("#content" ).addClass("darken");
  }
});

＆＃13;

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

$(document).ready(function(){
$("a").click(function(){
$('#content').toggleClass('darken')
})
})

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Answer 6

＆＃13;

＆＃13;

$('#collapse1').on('show.bs.collapse', function () {
  $("#content").addClass('darken')
})
$('#collapse1').on('hide.bs.collapse', function () {
  $("#content").removeClass('darken')
})

＆＃13;

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a id="myCollapsible" data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

＆＃13;

＆＃13;

＆＃13;