带有向上和向下箭头的手风琴没有相应地工作

Question

the following code is not working the second time when I click on accordion.当我点击手风琴时，以下代码第二次不起作用。 the up and down arrows in accordion not working accordingly.手风琴中的向上和向下箭头没有相应地工作。

<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 https://codepen.io/nhembram/pen/XKEJJp

the same iam trying to implement in project but arrows are not working相同的 iam 尝试在项目中实施，但箭头不起作用

Answer 1

As per link of codepen.io which you have provided.根据您提供的 codepen.io 的链接。 The transition of icon is handled by CSS.图标的过渡由 CSS 处理。

Could you please share more details may be in your project the CSS is getting overwrite by another CSS, as your script looks fine, but need to understand, what you are using in project.您能否分享更多详细信息，可能在您的项目中 CSS 被另一个 CSS 覆盖，因为您的脚本看起来不错，但需要了解您在项目中使用的内容。 So I could help you.所以我可以帮你。

Meanwhile you can also have a look on below code may this can help you.同时你也可以看看下面的代码可能对你有帮助。

 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