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

Bootstrap 3 collapse change chevron icon on click

提问by Dominic

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:

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

Here's the JQuery

这是 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!

我只想在折叠元素时将图标从下更改为上。然后在单击相同的类时切换回来。我真的被这个困住了。先感谢您！

采纳答案by royse41

The problem is with your jQuery code not being correct.

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

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:

看到第二个右括号了吗？那是提前关闭“开启”功能。尝试将您的 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');
  });

回答by Ростислав Кирчев

Pure CSS.

纯 CSS。

HTML part:

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>

The key element here is aria-expanded="false" or "true"

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

CSS:

CSS：

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

回答by royse41

Try this more elegant solution:

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

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

回答by trante

Similar to Bojan's answer, I use this solution.
Change HTML code like this:

与 Bojan 的回答类似，我使用了这个解决方案。
像这样更改 HTML 代码：

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

It's better to use .onevent with respect to .click. Also by using class selector it can be used as a site wide solution.

最好.on对.click. 此外，通过使用类选择器，它可以用作站点范围的解决方案。

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

回答by Michael Buchok

I'd like to offer an option along the same lines as another solution posted here, but uses a single div with transforms. This would also help make clean use of transitions to animate the icons as well.

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

`a[aria-expanded=true] .fa-chevron-right { transform: rotate(0deg); }

`a[aria-expanded=true] .fa-chevron-right { 变换：旋转（0度）；}

a[aria-expanded=false] .fa-chevron-right { transform: rotate(90deg); // or whatever direction you need }`

a[aria-expanded=false] .fa-chevron-right { 变换：旋转（90 度）；// 或任何你需要的方向 }`

回答by Paul Dasil

Pure CSS, with even less code + animation.

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

HTML part:

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:

CSS：

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

回答by Red Web

you can try this.

你可以试试这个。

Here's the HTML Code:

这是 HTML 代码：

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1<span class="glyphicon glyphicon-chevron-up"></span> </a>

Here's the JQuery

这是 JQuery

$('#accordion').on('shown.bs.collapse hidden.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').find("span.glyphicon").toggleClass('glyphicon-chevron-up glyphicon-chevron-down',200, "easeOutSine" );
});

回答by Inti

The simplest answer I could find and thought it would be useful to add here for others.

我能找到的最简单的答案，并认为在这里为其他人添加会很有用。

Essentially this involved this bit of css

本质上这涉及到这一点 css

/* Rotating glyphicon when expanding/collapsing */
.collapse-chevron .glyphicon {
  transition: .3s transform ease-in-out;
}
.collapse-chevron .collapsed .glyphicon {
  transform: rotate(-90deg);
}

which applied to this bit of html

这适用于这一位 html

<div class="collapse-chevron">
  <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
     <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
     <strong>link to toggle</strong>
  </a>
  <div class="collapse" id="collapseFilter">
    <p>Some content I want collapsed or expanded</p>
  </div>
</div>

Codepen of this code: https://codepen.io/anon/pen/PKxzVa

此代码的 Codepen：https://codepen.io/anon/pen/PKxzVa

Source: this article

来源：本文

See the codepen from the article for some more examples: https://codepen.io/disjfa/pen/EZdMpe

有关更多示例，请参阅文章中的 codepen：https://codepen.io/disjfa/pen/EZdMpe

回答by Sonu Nagar

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


<script>    

$('.card-header').click(function(){
        $cur = $(this);
        setTimeout(function(){ 
            $('.far').removeClass("fa-minus-square").addClass("fa-plus-square");
            if($cur.next().hasClass("show")) {
                //console.log('show');
                $cur.find('.far').removeClass("fa-plus-square").addClass("fa-minus-square");
            } else {
                //console.log('no show');
                $cur.find('.far').removeClass("fa-minus-square").addClass("fa-plus-square");
            }
        }, 500);


    });
    </script>

回答by Mukesh

fixed the issue changing HTML/CSS

修复了更改 HTML/CSS 的问题

HTML:

HTML：

<a data-toggle="collapse" href="#doc" class="yt-toggle collapsed">View Doc 
    <i class="fa fa-caret-right fa-fw"></i> 
    <i class="fa fa-caret-down fa-fw"></i>
</a>

CSS:

CSS：

.yt-toggle.collapsed .fa-caret-down {
  display: none;
}

.yt-toggle.collapsed .fa-caret-right {
  display: inline-block;
}

.yt-toggle .fa-caret-right {
  display: none;
}