0

我正在使用 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 拉进去？

任何帮助表示赞赏

4

1 回答 1

2

而不是切换一个 .collapsed 类（我假设它会有加号图标，因为可以打开折叠的 div），您应该使用加号图标作为默认精灵，然后添加/删除一个名为 .opened 的类。该 .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 确实有减号，您可以使用折叠而不是上面打开。

于 2013-01-28T23:32:16.303 回答