bootstrap 4 通过 javascript 崩溃

Question

我有一个带有可折叠手风琴桌的 bootstrap 4 页面。每个都有一个 fa-plus-circle 图标。当用户单击此按钮时，该图标会变为 fa-minus-circle 图标，然后我单击减号圆图标或按钮绝对不会变为加号圆图标。请帮忙！

<link rel="stylesheet" href="../../assets/css/bs/bootstrap.css">
      <link rel="stylesheet" href="../../assets/css/custom/custom.css">
      <link rel="stylesheet" href="../../assets/css/bs/bootstrap.min.css">
      <link rel="shortcut icon" href="../../assets/img/logo/logoCircle.png" type="image/x-icon">
      <link rel="stylesheet" href="../../assets/css/fontawesome/all.css">
      <link rel="stylesheet" href="../../assets/css/animate/animate.css">
 <script type="text/javascript">
                 toggleCircle = function(e) {
                  if ($(e.children).attr("class").includes('down')) {
                    $(e.children).removeClass("fa-minus-circle");
                    $(e.children).addClass("fa-plus-circle");
                  } else {
                    $(e.children).removeClass("fa-plus-circle");
                    $(e.children).addClass("fa-minus-circle");
                  }

                }
                      </script>
    <div class="container">
     <div class="row">
    <div class="accordion col-12" id="accordionExample">
        <div class="card">
            <div class="card-header bg-light" id="headingOne">
              <h2 class="mb-0">
        <button class="btn  text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" onclick="toggleCircle(this)" >
          <span class="fa fa-plus-circle"></span>
          &nbsp;&nbsp;
          How do I recover my account? &nbsp;
        </button>
              </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                <span>Were sorry to hear that! If you can't sign in to your Pandayan EGC Account.<br><br>

                            To reset your password:<br>
                              1. Go to the login page and you see the forgot your password and click that. Enter your email address click proceed.<br>
                              2. Once you click the proceed button go to your gmail account and there's an email. <br>
                              3. After that you create new password and click save changes. <br>  
                 </span>
              </div>
            </div>
          </div>
        </div>
</div>
</div>
<script src="../../assets/js/jquery/jquery-3.3.1.js"></script>
      <script src="../../assets/js/popper/popper.min.js"></script>
      <script src="../../assets/js/bs/bootstrap.min.js"></script>
      <script src="../../assets/js/fontawesome/all.js"></script>
      <script src="../../assets/js/backstretch/backstretch.js"></script>
      <script src="../../assets/js/backstretch/backstretchSettings01.js"></script>
      <script src="../../assets/js/bsn/bootstrap-notify.min.js"></script>
      <script src="../../assets/js/general/loader.js"></script>
      <script src="../../assets/js/general/login.js"></script>
      <script src="../../assets/js/general/forgotpassword.js"></script>
      <script src="../../assets/js/general/accountregister.js"></script>

Answer 1

强烈要求说你根本不需要任何 JS！只需一行 CSS

.collapsed .fas:before {
  content: "\f055";    /* https://fontawesome.com/cheatsheet */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<button class="btn  text-dark collapsed" type="button " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  <span class="fas fa-minus-circle"></span> How do I recover my account?
</button>

<div id="collapseOne" class="collapse">OU YEAH</div>


<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

而且，从逻辑上讲，如果您开始折叠，请使用<span class="fas fa-minus-circle"></span>。

---

解释一下，Bootstrap 已经动态地切换了collapsed 按钮类。以上就是使用 CSS 定位该类，找到 .fas 图标并将其更改为所需的。