当bootstrap div折叠时，向div添加类

Question

当可折叠的bootstrap 3被折叠时，如何将类添加到div？我需要一个代码，添加类darken时，div是折叠的。关闭可折叠对象时，应删除类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。