为什么将类添加到按钮仅在第二次单击后才起作用？

Question

当显示引导程序折叠时和隐藏引导程序折叠时，我尝试编辑按钮样式。 但是当我第一次点击按钮时，折叠显示但按钮样式没有改变。 当我第二次单击按钮时它们会发生变化（然后隐藏折叠）

我的按钮：

<button type="button" class="btn-block" data-toggle="collapse" data-target="#demo1" id="demo1button"> 
Button
</button>

折叠元素

<div  class="collapse" id="demo1">
    ...            
</div>

脚本

$("#demo1button").click(function(){
if(!$("#demo1").hasClass('show')){
    $("#demo1button").addClass("collapsed");
}else{
  $("#demo1button").removeClass("collapsed");
}
});

更重要的是，我尝试以其他方式执行此操作，但仍然无法正常工作

脚本

$("#demo1button").click(function(){
 if($("#demo1button").hasClass('collapsed')){
   $("#demo1button").removeClass("collapsed");
 }else{  
   $("#demo1button").addClass("collapsed");
 }    
});

样式文件

.collapsed{
background-color: #7a7a7a;
}

Answer 1

我认为您不必使用外部 JS 来添加和删除类，因为您使用的是可折叠的引导程序，因此引导程序将管理您的按钮元素的类列表。

你只需要在 button collapsed 中定义一个类，所以你的按钮应该是：

<button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo1" id="demo1button"> 
    Button
</button>

然后以正确的方式应用您的活动内容 CSS。

这是我的代码段中的演示代码：

 .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>

为什么将类添加到按钮仅在第二次单击后才起作用？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-10-16 11:41:28

为什么将类添加到按钮仅在第二次单击后才起作用？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-10-16 11:41:28

解决方案1
2 已采纳 2020-10-16 11:41:28