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

问题描述

我已经阅读了与我的问题相关的所有问题，但都尝试过，但都无济于事.我似乎无法让我的代码工作，尽管我认为"我编写的几乎所有代码都与本网站上发布的解决方案相同.

这是 HTML 代码:

<p class="text" data-toggle="collapse" data-target="#serviceList"><span id="servicesButton" data-toggle="tooltip" data-original-title="点击我！"><span class="servicedrop glyphicon glyphicon-chevron-down"></span>提供的服务<span class="servicedrop glyphicon glyphicon-chevron-down"></span></span></p>
<div id="serviceList" class="折叠"><div class="行特征">...

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

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.

Here's the HTML Code:

<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">
  ...

Here's the 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!

解决方案

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() {

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 折叠更改 V 形图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！