为什么将类添加到按钮仅在第二次单击后才起作用？
[英]Why add class to button only works after a second click?
问题描述
I try edit button style when bootstrap collapse is show and when bootstrap collapsed is hidden.
当显示引导程序折叠时和隐藏引导程序折叠时，我尝试编辑按钮样式。 But when I first time click on the button, collapse is show but button style doesn't change.但是当我第一次点击按钮时，折叠显示但按钮样式没有改变。 They change when i click button second time (then collapse is hidden)当我第二次单击按钮时它们会发生变化（然后隐藏折叠）
My button:我的按钮：
<button type="button" class="btn-block" data-toggle="collapse" data-target="#demo1" id="demo1button">
Button
</button>
Collapse element折叠元素
<div class="collapse" id="demo1">
...
</div>
Script脚本
$("#demo1button").click(function(){
if(!$("#demo1").hasClass('show')){
$("#demo1button").addClass("collapsed");
}else{
$("#demo1button").removeClass("collapsed");
}
});
What's more, i try do this in other way and it still dosen't work更重要的是，我尝试以其他方式执行此操作，但仍然无法正常工作
Script脚本
$("#demo1button").click(function(){
if($("#demo1button").hasClass('collapsed')){
$("#demo1button").removeClass("collapsed");
}else{
$("#demo1button").addClass("collapsed");
}
});
Style.css样式文件
.collapsed{
background-color: #7a7a7a;
}
1 个解决方案
解决方案1
2 已采纳 2020-10-16 11:41:28
I think that you don't have to use external JS to add and remove class because you are using bootstrap collapsible so Bootstrap will manage that class list of your button element.我认为您不必使用外部 JS 来添加和删除类，因为您使用的是可折叠的引导程序，因此引导程序将管理您的按钮元素的类列表。
You just have to define a class in button collapsed , so your button should be:你只需要在 button collapsed 中定义一个类，所以你的按钮应该是：
<button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo1" id="demo1button">
Button
</button>
then apply your active content CSS in proper way.然后以正确的方式应用您的活动内容 CSS。
Here is a demo code in my snippet:这是我的代码段中的演示代码：
.single_collapsible button { color: #fff; border: none; outline: none; background-color: green; } button.collapsed { background-color: gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="single_collapsible mb-2"> <button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo1" id="demo1button"> Button</button> <div class="collapse" id="demo1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div class="single_collapsible mb-2"> <button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo2" id="demo2button"> Button</button> <div class="collapse" id="demo2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div class="single_collapsible mb-2"> <button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo3" id="demo3button"> Button</button> <div class="collapse" id="demo3"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.