javascript - 折叠 Bootstrap div 时向 div 添加类

Question

当 bootstrap 3 collapsible 折叠时，如何向 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>