首页> 疑难解答

bootstrap 4通过javascript崩溃

withpy 2021-06-26

简介我有一个带可折叠手风琴表的bootstrap 4页面。每个都有一个fa-plus-circle图标。当用户点击此按钮时,该图标会在我点击之后变为fa-minus-circle图标...

我有一个带可折叠手风琴表的bootstrap 4页面。每个都有一个fa-plus-circle图标。当用户点击此按钮时,该图标会变为fa-minus-circle图标,之后我点击了减号圆图标或按钮,绝对不会变成加圆图标。 Plss帮忙!

<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>
0
投票

不要说你根本不需要任何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已经在danymically切换collapsed按钮类。所以上面所做的,是使用CSS的目标,找到.fas图标并将其更改为所需的图标。

相关文章