单击Bootstrap 3折叠更改V形图标

Question

我已经阅读了有关我的问题的所有相关问题,并尝试了所有这些问题无济于事.我似乎无法使我的代码工作,即使我"思考"我写的几乎所有代码与本网站上发布的解决方案相同.

这是HTML代码:

<div class="press-title">
  <p class="text" data-toggle="collapse" data-target="#serviceList">
    <span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">
      <span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>
    </span>
  </p>
</div>
<div id="serviceList" class="collapse">
  <div class="row featurette">
  ...

这是JQuery

$('#serviceList').on('shown.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  }

$('#serviceList').on('hidden.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  }

我只是想在折叠元素时将图标从下到上更改.然后在单击同一个类时切换回来.我真的很困惑这个.先感谢您!

Answer 1

纯CSS.

HTML部分:

   <a data-toggle="collapse" href="#collapseExample" 
      aria-expanded="false" aria-controls="collapseExample">
        Open/Close collapse
        <i class="fa fa-chevron-right pull-right"></i>
        <i class="fa fa-chevron-down pull-right"></i>
    </a>

这里的关键因素是aria-expanded ="false"或"true"

CSS:

a[aria-expanded=true] .fa-chevron-right {
   display: none;
}
a[aria-expanded=false] .fa-chevron-down {
   display: none;
}

Answer 2

问题是你的jQuery代码不正确.

您将在此行的早期关闭事件处理函数:

$('#serviceList').on('shown.bs.collapse'), function() {

看到第二个右括号？那早就关闭了'on'功能.尝试将jQuery更改为如下所示:

$('#serviceList').on('shown.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  });

$('#serviceList').on('hidden.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  });

Answer 3

试试这个更优雅的解决方案

$('#serviceList').click(function(){
    $(this).find('.servicedrop').toggleClass('icon-chevron-down icon-chevron-up');
});

Answer 4

与Bojan的答案类似,我使用这个解决方案.
像这样更改HTML代码:

<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>

.on关于使用事件最好.click.此外,通过使用类选择器,它可以用作站点范围的解决方案.

$('.chevron_toggleable').on('click', function() {
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Answer 5

纯 CSS，更少的代码 + 动画。

HTML部分：

   <a data-toggle="collapse" href="#collapseExample" 
      aria-expanded="false" aria-controls="collapseExample">
        Open/Close collapse
        <i class="fa fa-chevron-right pull-right"></i>
    </a>

CSS：

a[aria-expanded=true] .fa-chevron-right {
 transition: .3s transform ease-in-out;
 transform: rotate(90deg);
}

Answer 6

我想提供与此处发布的另一个解决方案相同的选项，但将单个div用于转换。这也将有助于彻底使用过渡来为图标设置动画。

`a [aria-expanded = true] .fa-chevron-right {transform：rotation（0deg）; }

a [aria-expanded = false] .fa-chevron-right {变换：rotate（90deg）; //或您需要的任何方向}`