手风琴.glyphicon-chevron-up和.glyphicon-chevron-down不起作用

时间:2019-03-12 15:39:07

标签: javascript jquery html twitter-bootstrap-3 jquery-ui-accordion

我正在使用带有向上和向下箭头的手风琴-第一次运行时显示向下箭头,因此用户必须单击以查看数据-单击向下箭头会显示数据,但仍然显示向上箭头,而没有恢复到原来的状态...我有一个Javascript函数可以进行检查...

关注此链接:- https://www.bootply.com/113766#

更改箭头的Javascript:-

$(document).ready(function ()
{
      $('.collapse').on('shown.bs.collapse', function () {
      $(this).parent().find(
      ".glyphicon-chevron-up").removeClass("glyphicon-chevron-up")
      .addClass("glyphicon-chevron-down");

    }).on('hidden.bs.collapse', function ()
    {
        $(this).parent().find(".glyphicon-chevron-down")
        .removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron- 
        up");
    });
 });

HTML:-

<div class="accordion">
<h4 class="up">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
       Testing
        <span class="glyphicon  glyphicon-chevron-up" style="float: right"></span>
    </a>

</h4>


<div id="collapseOne" class="collapse">

始终显示默认箭头-单击时显示数据

enter image description here

1 个答案:

答案 0 :(得分:0)

原来是指向错误的JQuery版本-现在都可以使用...