Javascript 和 Bootstrap 下拉菜单答案

【问题标题】：Javascript and Bootstrap dropdownJavascript 和 Bootstrap 下拉菜单
【发布时间】：2018-07-07 10:13:33
【问题描述】：

我正在尝试在单击时使引导下拉菜单更改类，并且我设法做到了。当我点击下拉菜单时，班级从“+”变为“-”，但是当我点击第二个下拉菜单时，我之前点击的那个不会改变班级。 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");
    });

我知道这可能很容易，但我是初学者，所以我很想学习这种方式以备下次使用。

【问题讨论】：

为什么你听按钮的点击，你想听下拉菜单的点击？？？

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

这是 Css Only 解决方案，可通过 Bootstrap 4 Dropdown

满足您的需求

请注意，您需要在引导程序 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>

【讨论】：