为什么向按钮添加类仅在第二次单击后才有效？答案

【问题标题】：Why add class to button only works after a second click?为什么向按钮添加类仅在第二次单击后才有效？
【发布时间】：2021-08-14 05:09:20
【问题描述】：

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

我的按钮：

<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");
 }    
});

Style.css

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

【问题讨论】：

您在#demo1 上检查了课程，但在#demo1button 上更改了它。 #demo1 的类在你的过程中永远不会改变。另请查看classList.toggle。
我将 #demo1 更改为 #demo1button 仍然无法正常工作。当我第一次单击按钮时没有任何反应

标签： javascript jquery bootstrap-4

【解决方案1】：

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

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

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

然后以适当的方式应用您的活动内容 CSS。

这是我的 sn-p 中的演示代码：

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

【讨论】：

我将折叠类添加到我的 css 文件中的按钮 sice 我为具有折叠类的元素定义自定义样式。 Bootstrap 不向显示元素的按钮添加自动类（它添加到折叠元素）
@Adam 我在我的回答中创建了一个演示作为 sn-p 供您参考，请查看它并遵循相同的方法，我希望这对您有用。
这是正确答案，请参见此处jsfiddle.net/bq0o827m Bootstrap 将在按钮中添加/删除.collapsed，并将.show 添加/删除到可折叠元素。您只需手动设置初始状态（如this answer）或通过javascript getbootstrap.com/docs/4.5/components/collapse/#collapseoptions 初始化折叠
太棒了 :) 但我想添加反向类 - 何时展开