為什么將類添加到按鈕僅在第二次單擊后才起作用？

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