引导程序折叠文本更改

Question

我正在使用引导崩溃。我试图添加一个简单的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 data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012" class="collapsible">
    <i class="fa fa-caret-right"></i> 2012
  </a><br />

它现在有点工作，但问题是，一旦你一开始点击一个标签，它就什么都不做，然后再次点击它，函数就会开始工作，然后与我最初希望的工作方式不同步。

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