Javascript和Bootstrap下拉列表

Question

我試圖在單擊時使bootstrap下拉菜單更改類，但我設法做到了。 當我單擊下拉列表時，類將從“ +”更改為“-”，但是當我單擊第二個下拉列表時，我之前單擊的那個不會更改類。 javascript是否可以處理if和else語句。 我真的很難過這項工作。

這是下拉菜單的HTML

<div class="dropdownCard">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span><i class="fas fa-percent percent1"></i>Angebot</span> <span><i class="fas fa-minus minus"></i></span>
       </button>
      </h5>
    </div>
 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
   <div class="dropdownBody">
     <div class="dropdownDetail">
       <div class="detailTitle">
         <h2>"Steiler Donnerstag"</h2>
       </div>
      <div class="detailInfo">
      <p><span class="titleCard">Profitieren Sie von <strong>20% Rabatt</strong> auf <br></span> - Die Fahrt mit dem Postauto ab Reichenbach i.K. <br> auf die Griesalp und retour <br> - Ein Mittagessen (drei Gänge, ohne Getränke) in einem <br> der Restaurants Berggasthaus Golderli, Restaurant Alpenruh, <br> Griesalp Hotels oder dem Naturfreundehaus Gorneren <br><br>
       </p>
<a href="#" class="detailLink"><strong>Angebot auf MyPlus ansehen</strong></a>
       </div>
       <div class="detailImg">
       <img src="assets/img/Promo2.jpg" alt="promo image" class="img-fluid">
        </div>
      </div>
    </div>
  </div>
</div>

這是我建立的jQuery

$("button").click(function(){
    $(this).find(".minus").toggleClass("fa-minus fa-plus");
    });

我知道這可能很容易，但是我是一個初學者，所以我很想學習這種方式以備將來使用。

Answer 1

這是Bootstrap 4 Dropdown所需的Css Only解決方案

請注意，您需要在引導程序4中包含Popper.js以便進行下拉

 .dropdown .dropdown-toggle::after { content: '+'; border: none; width: 10px; } .dropdown.show .dropdown-toggle::after { content: '-'; border: none; width: 10px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>