Question

我正在使用bootstrap崩溃。我尝试添加一个简单的jquery语句，一旦用户点击其中一个崩溃而不是图标更改。我在页面上有多次折叠，因此，我猜测我必须使用＆＃34;这个＆＃34;代码中的陈述。

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

Bootstrap折叠文本更改

1 个答案: