Question

我想要这个简单的Bootstrap 3手风琴：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
      </div>
    </div>
  </div>
</div>

在关闭时有一个加号图标，在悬停和活动时有一个减号图标。我的css：

.panel-title a {
     background: url('plus.png') no-repeat 100% 50% ;
     padding-right:20px;}
.panel-title a:hover{
   background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a:active {
  background: url('minus.png') no-repeat 100% 50% ; }

到目前为止除了活跃状态之外还在工作。你能帮我把它搞定吗？谢谢

Answer 1

如果我没记错，只有在实际点击链接时才会出现:active状态。 :active与崩溃的状态无关。

为了实现这一点，我会将你的CSS更改为：

.panel-title a {
   background: url('plus.png') no-repeat 100% 50% ;
   padding-right:20px;}
.panel-title a:hover{
   background: url('minus.png') no-repeat 100% 50% ; }
.panel-title a.active {
  background: url('minus.png') no-repeat 100% 50% ; }

请注意，我们实际上不会使用:active伪，而是使用名为.active的类。

现在，只需通过javascript打开和关闭课程。有几种方法可以做到这一点，但最直接的方法是将监听器附加到现有的a标签，如下所示：

$('[data-toggle]').on('click', function() {
  $(this).toggleClass('active');
});

总而言之，在您的CSS中将:active更改为.active，并添加三行javascript。

有关工作示例，请参阅http://www.bootply.com/130209。

Bootstrap 3手风琴 - 在面板标题旁边展开折叠图标

1 个答案: