Bootstrap 4 Nested Collapse Style Issue
Question
there is a collapse (with button 2) inside of a another collaspe (with button 1). when parent is collapsed the background color of button 1 is blue (bg- primary) and when its not collapsed the backpround color is yellow (bg- warning). when we click button 2, the color stays yellow but when button 2 clicked again and its collapsed, the color of button 1 changes to blue. I want to button 1 stays yellow when it is not collapsed whether her child is collapsed or not.
thank you and sorry for my bad english.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="my-2"> <button class="btn btn-primary" id="btn1" type="button" name="button" data-toggle="collapse" data-target="#collapsebtn" aria-expanded="false" aria-controls="collapsebtn"> button 1 </button> </div> <div class="collapse" id="collapsebtn"> <div class="mb-2"> <button class="btn btn-dark btn-sm" type="button" name="button" data-toggle="collapse" data-target="#collapsebtn2" aria-expanded="false" aria-controls="collapsebtn2"> button 2 </button> </div> <div class="collapse border border-primary" id="collapsebtn2"> Lorem ipsum dolor text.... </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#collapsebtn").on("show.bs.collapse", function() { $("#btn1").removeClass("btn-primary"); $("#btn1").addClass("btn-warning"); }); $("#collapsebtn").on("hidden.bs.collapse", function() { $("#btn1").addClass("btn-primary"); $("#btn1").removeClass("btn-warning"); }); }); </script> </body> </html>
1 answers
solution1
1 ACCPTED 2018-11-11 19:32:20
add this code:
$("#collapsebtn").on("hidden.bs.collapse", function() {
if(!$('#collapsebtn').hasClass('show')){
$("#btn1").addClass("btn-primary");
$("#btn1").removeClass("btn-warning");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.