javascript - Bootstrap 折叠文本更改

Question

我正在使用 Bootstrap 崩溃。我正在尝试添加一个简单的 jquery 语句，一旦用户单击其中一个折叠而不是图标更改。我在页面上有多个折叠，所以我猜我必须在代码中使用“this”语句。

这是HTML

<a data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012">
  <i class="fa fa-caret-right"></i> 2012
</a><br />
<div class="collapse" id="y2012">
  text
</div>
<a data-toggle="collapse" href="#y2013" aria-expanded="false" aria-controls="y2013">
  <i class="fa fa-caret-right"></i> 2013
</a><br />
<div class="collapse" id="y2013">
  text
</div>

这是我现在得到的 JS

$(".collapse").hasClass("in")?true : (function(){
    $("a i").removeClass('fa-caret-right');
    $("a i").addClass('fa-caret-down');
}, function () {
    $("a i").removeClass('fa-caret-down');
    $("a i").addClass('fa-caret-right');
});

----------------已更新----------------所以我有点让它工作我已经将 js 更改为

    $('.collapsible').click(function () {
        var $this = $(this);
        $this.toggleClass('collapsible');
        if ($this.hasClass('collapsible')) {
            $this.children("i").removeClass('fa-caret-right');
            $this.children("i").addClass('fa-caret-down');
        } else {
            $this.children("i").addClass('fa-caret-right');
            $this.children("i").removeClass('fa-caret-down');
        }
    });

并且已经将可折叠类添加到 a 标签中，这样它就可以了

  <a data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012" class="collapsible">
    <i class="fa fa-caret-right"></i> 2012
  </a><br />

它现在可以工作了，但问题是一旦您首先单击 a 标签它什么都不做，然后再次单击它该功能开始工作，然后变得与我最初希望它工作的方式不同步。

Answer 1

$(".collapse").click(function(){
  $(this).hasClass("in")?true : (function(){
      $(this).children("i").removeClass('fa-caret-right');
      $(this).children("i").addClass('fa-caret-down');
  }, function () {
      $(this).children("i").removeClass('fa-caret-down');
      $(this).children("i").addClass('fa-caret-right');
  });
});