Question

我正在使用bootstraps手风琴来显示问题列表，然后当您点击加号图标时，它会向下滑动以显示答案。我想要实现的是，当手风琴扩展以显示答案时，将加号图标更改为减号（我有一个精灵组成）到目前为止，图像不会改变

查看

<div id="accordion" class="accordion in collapse">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle collapsed">Question1</a>
    </div>
    <!--End of Accordion heading-->
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">Answer to Question 1.</div>
      <!--End of accordion Inner-->
    </div>
    <!--End of collapseOne-->
  </div>
  <!--End of accordion-group-->
</div>

CSS

.accordion .accordion-toggle, .toggle-box a {
background: url("/assets/collapse_btn.png") no-repeat scroll left 10px transparent;
color: #666666;
display: block;
font-size: 18px;
height: 25px;
line-height: 23px;
padding: 10px 20px 10px 40px;
}

.accordion a.collapsed, .toggle-box .collapsed {
background: url("/assets/collapse_btn.png") no-repeat scroll left -58px transparent;
}

我有这个jquery在切换状态时更改类

$('.accordion').collapse();
$('.accordion').on('shown', function () {
    var $aGroup = $('.accordion-group');
    $aGroup.find('.accordion-body').not(".in").prev('.accordion-heading').children("a").addClass('collapsed');

  })

但这不起作用。我的Jquery仅限于我可能在这里犯了一些错误。谁能指出我做错了。我试图把一个小提琴放在一起，以便使诊断变得更容易，但是不会拉上手风琴js？

任何帮助表示赞赏

Answer 1

而不是切换.collapsed类（我假设它会有加号图标，因为可以打开折叠的div），你应该使用加号图标作为默认的精灵，然后添加/删除一个名为.opened的类。那个打开的班级会有减号。此外，我认为以.accordion-body为目标会更容易。这是一个如何做到这一点的例子：

脚本：

$('.accordion-body').on('show',function(){
     $(this).siblings('.accordion-heading').find('.accordion-toggle')
       .addClass('opened');
    });
$('.accordion-body').on('hide',function(){
     $(this).siblings('.accordion-heading').find('.accordion-toggle')
       .removeClass('opened');
 });

风格：

/* Class below should have plus sign */
.accordion-toggle {
    background: url("/assets/collapse_btn.png") no-repeat scroll left 10px transparent;
    color: #666666;
    display: block;
    font-size: 18px;
    height: 25px;
    line-height: 23px;
    padding: 10px 20px 10px 40px;
}
/* Class below should have minus sign */
.accordion-toggle.opened {
    background: url("/assets/collapse_btn.png") no-repeat scroll left -58px transparent; 
}

我已经使用我自己的加/减图标在本地测试了这段代码，它对我有用。

*如果您的课程名称错误且.collapsed确实有减号，您可以使用折叠而不是上面打开。

在Jquery .toggle（）上更改类名; Bootstrap手风琴

1 个答案: