帶有向上和向下箭頭的手風琴沒有相應地工作

Question

當我點擊手風琴時，以下代碼第二次不起作用。 手風琴中的向上和向下箭頭沒有相應地工作。

<script type="text/javascript">

    $('.panel-collapse').on('hide.bs.collapse', function () {
        debugger;
        $(this).siblings('.panel-heading').removeClass('active');
    });
    $('.panel-collapse').on('show.bs.collapse', function () {
        debugger;
        $(this).siblings('.panel-heading').addClass('active');
    });

https://codepen.io/nhembram/pen/XKEJJp

相同的 iam 嘗試在項目中實施，但箭頭不起作用

Answer 1

根據您提供的 codepen.io 的鏈接。 圖標的過渡由 CSS 處理。

您能否分享更多詳細信息，可能在您的項目中 CSS 被另一個 CSS 覆蓋，因為您的腳本看起來不錯，但需要了解您在項目中使用的內容。 所以我可以幫你。

同時你也可以看看下面的代碼可能對你有幫助。

 function toggleIcon(e) { $(e.target).prev('.panel-heading').find(".more-less").toggleClass('glyphicon-menu-down glyphicon-menu-up'); } $('.panel-group').on('hidden.bs.collapse', toggleIcon); $('.panel-group').on('shown.bs.collapse', toggleIcon);

 . .panel-group.panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; }.panel-default >.panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE; }.panel-title { font-size: 14px; }.panel-title > a { display: block; padding: 15px; text-decoration: none; }.more-less { float: right; color: #212121; }.panel-default >.panel-heading +.panel-collapse >.panel-body { border-top-color: #EEEEEE; } /* ----- v CAN BE DELETED v ----- */ body { background-color: #26a69a; }.demo { padding-top: 60px; padding-bottom: 110px; }.demo-footer { position: fixed; bottom: 0; width: 100%; padding: 15px; background-color: #212121; text-align: center; }.demo-footer > a { text-decoration: none; font-weight: bold; font-size: 14px; color: #fff; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="more-less glyphicon glyphicon-menu-down"></i> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> panel body elements should be added here </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="more-less glyphicon glyphicon-menu-down"></i> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> panel body elements should be added here </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="more-less glyphicon glyphicon-menu-down"></i> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> panel body elements should be added here </div> </div> </div> </div> </div> </body> </html>

帶有向上和向下箭頭的手風琴沒有相應地工作

問題描述

1 個解決方案

解決方案1
2 2021-05-25 06:52:34

帶有向上和向下箭頭的手風琴沒有相應地工作

問題描述

1 個解決方案

解決方案1 2 2021-05-25 06:52:34

解決方案1
2 2021-05-25 06:52:34