在折叠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

$( "#switch" ).click(function() {
  if($("#collapse1" ).hasClass("in")) {
    $("#content" ).removeClass("darken");
  } else {
    $("#content" ).addClass("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" id="switch"> Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

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

$('#collapse1').on('show.bs.collapse', function () {
  $("#content").addClass('darken')
})
$('#collapse1').on('hide.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 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>