jquery – Bootstrap 3点击崩溃改变雪佛龙图标

我已经阅读了有关我的问题的所有相关问题,并尝试了所有这些都没有用.我似乎无法使我的代码工作,即使我“认为”几乎每个代码我写的是与本网站上发布的解决方案相同.

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

我只是想将图标从下到上改变,在折叠元素之后.然后在同一个课程被点击时回切.
我真的坚持这个.先谢谢你！

解决方法

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

您在此行早期关闭事件处理函数：

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

看到第二个圆括号？这是早期关闭“开”功能.尝试改变你的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');
  });