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

这是仅CSS 解决方案，可通过 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>

Javascript和Bootsrap下拉列表

1 个答案: