单击Bootstrap 3折叠更改人字形图标 [英] Bootstrap 3 collapse change chevron icon on click

问题描述

我已经阅读了有关我的问题的所有相关问题，并且都尝试不了.即使我认为"我编写的几乎所有代码都与此网站上发布的解决方案相同，我似乎也无法使我的代码正常工作.

I have read all related questions regarding my question and have tried them all to no avail. I can't seem to make my code work, even though I "think" almost every code I wrote was the same with the solutions posted on this site.

这是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');
  }

我只想在折叠元素时将图标从下到上更改.单击相同的类后，然后切换回去. 我真的很喜欢这个.预先谢谢你！

I just want to change the icon from down to up, upon collapsing the element. Then toggle back when the same class is clicked. I'm really stuck with this one. Thank you in advance!

推荐答案

问题在于您的jQuery代码不正确.

The problem is with your jQuery code not being correct.

您将在此行的早期关闭事件处理程序功能:

You're closing the event handler function early on this line:

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

看到第二个右括号吗?这将尽早关闭打开"功能.尝试将jQuery更改如下:

See that second closing parenthesis? That's closing the 'on' function early. Try changing your jQuery to look like this:

$('#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');
  });

这篇关于单击Bootstrap 3折叠更改人字形图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！