18

我是一个 jquery/javascript 新手。我想要做的是在打开的手风琴标题中添加一个类，并在我打开另一个时将其删除。

继承人的代码：

<div class="accordion" data-collapse-type="manual" id="parent">
  <div class="accordion-group">
    <div class="accordion-heading">             
      <a class="accordion-toggle category" data-toggle="collapse" data-parent="#parent" href="#category1">Category 1
      </a>
    </div><!--/accordion-heading-->
    <div id="category1" class="accordion-body collapse">
      <ul class="accordion-inner unstyled">
        <li id="" class="sidelink"><a href="">Open Link 1</a></li>
        <li id="" class="sidelink"><a href="">Open Link 2</a></li>
        <li id="" class="sidelink"><a href="">Open Link 3</a></li>
      </ul>
    </div><!--/category1-->
  </div><!--/accordion-group-->
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle category" href="#Category2">Category 2</a>
    </div><!--/accordion-heading-->
  </div><!--/accordion-group-->
</div><!--/accordion-->

我附在页面上的脚本是

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tools.min.js"></script>

所以我一直在寻找的是在菜单打开时将.active类添加到 a.accordion-toggle （手风琴风格），然后在选择另一个时让它消失。我在这里查看了引导程序的文档，但它似乎对我没有多大帮助（因为我不知道如何处理

$('#myCollapsible').on('hidden', function () { // 做某事... })

或放置它的位置）我也尝试过.addClass() jquery 加法器，但我只能获得 javascript 版本document.getElementById("accordion-heading").className += "newClass"; 工作（如果我给手风琴组标题一个 ID，但在这种情况下会有多个手风琴组）当我把脚本放在 div 层之后。

4

11 回答 11

29

您可以为此使用折叠事件。

$(function() {

    $('.accordion').on('show', function (e) {
         $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
    });

    $('.accordion').on('hide', function (e) {
        $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
    });

});​

这是一个 JsFiddle http://jsfiddle.net/D2RLR/251/

于 2012-06-06T17:52:30.833 回答
16

这是我对这个问题的解决方案。基于上面的一些很好的答案，但适用于 Bootstrap 3.1.x

$('#accordion')
  .on('show.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').addClass('active');
  })
  .on('hide.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').removeClass('active');
  });
于 2014-06-04T09:28:44.753 回答
2

我也想添加一个“活动”类或类似的，但我在检查过程中注意到，当所有链接处于非活动状态时，都有一个“折叠”类，在选择选项卡/链接时会被删除，因此我只是在没有标签的情况下标记了选项卡“崩溃”的班级。

于 2015-05-21T15:00:30.980 回答
1

我已经尝试过 Michael D. Irizarry 的解决方案，但这对我不起作用。所以我想出了自己的代码：

$(function() {
    $('a.accordion-toggle').click(function(e) {
        e.preventDefault();
        if(!$(this).parent().hasClass('active')) {
            $('.accordion-heading').removeClass('active');
            $('.accordion-body').removeClass('active');
            $(this).parent().addClass('active').next().addClass('active');
        } else {
            $('.accordion-heading').removeClass('active');
            $('.accordion-body').removeClass('active');
        }
    });
});

如果手风琴标题还没有活动类，则所有手风琴标题和正文都将失去活动类，并且已单击的标题及其对应的正文标签将获得添加的类。

如果它已经激活了类（所以如果它已经打开并被单击），那么活动类将被删除并且不会发生其他任何事情。

于 2013-08-13T08:48:03.883 回答
1

只需检查 BS 代码添加的折叠类：

$('a.accordion-toggle').on('click', function () {
    if( $(this).hasClass('collapsed') !== true ){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
});
于 2013-08-20T17:40:43.740 回答
1

我认为这是迄今为止最简单的方法。

$('a.accordion-toggle').on('click', function () {
  $('a.accordion-toggle').removeClass('active');
  $(this).addClass('active');
});
于 2014-08-21T09:36:40.610 回答
0

我认为如果你把它放在你的javascript上它会起作用：

$('.accordion-toggle').on('shown', function () {
 $(this).addClass('active') });

$('.accordion-toggle').on('hidden', function () {
 $(this).removeClass('active') });
于 2012-06-06T17:15:41.977 回答
0

类活动不要给项目，因为在更少的文件中这个类改变了你必须给它css而不是类。此代码效果最好，您可以添加另一个所需的 css

 $(function () {
            $('#accordion')
     .on('show.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({'background-color': 'red','color':'white'})
     })
     .on('hide.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').css({ 'background-color': '#b6ff00', 'color': 'black' })
     });
        });
于 2016-02-27T10:33:16.703 回答
0

这适用于我使用 Bootstrap 3.3.6，

 $('#accordion')
   .on('show.bs.collapse', function (e) {
       $(e.target).parent('.panel').addClass('panel-primary');
   })
   .on('hide.bs.collapse', function (e) {
       $(e.target).parent('.panel').removeClass('panel-primary');
   });
        });
于 2016-05-09T16:13:58.380 回答
0

https://jsfiddle.net/u2ay67Lo/6/

HTML

    <div id="accordion2" class="accordion panel-group">
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse5" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
             Lorem ipsum dolor sit amet ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse5">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit faucibus elit nec mollis. Phasellus tempor urna tellus, eget lobortis magna porttitor eget. Sed risus ex, ultrices ac quam at, ultrices feugiat dolor. Mauris nec fermentum arcu.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse7" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
               Donec vitae efficitur magna...
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse7">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Donec vitae efficitur magna, non iaculis sapien. Pellentesque ut leo turpis. Sed aliquet, lorem vel sollicitudin pretium, sapien augue rutrum risus, eu ultricies risus est in nibh. Etiam molestie non lorem in mollis. Cras non mi tempus, varius elit id,
            ultrices diam. Vestibulum bibendum lacus vitae augue interdum, ut ultricies elit aliquam. Fusce rhoncus nunc convallis luctus ornare. Curabitur vulputate posuere ligula in eleifend. Vivamus commodo mi sed felis dignissim, rutrum pharetra odio
            varius. Sed vel aliquet tortor. Nunc sit amet nibh eget sem elementum pulvinar. Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Participa</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse8" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
              Maecenas et felis at felis...
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse8">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Maecenas et felis at felis venenatis lacinia vitae sit amet nulla.Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Peças escritas e desenhadas (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Button1</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group panel panel-default">
    <div class="panel-heading accordion-heading">
      <a href="#collapse9" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle panel-title">
               Quisque placerat in dui quis vestibulum. ..
            </a>
    </div>
    <div class="accordion-body collapse" id="collapse9">
      <div class="accordion-inner panel-body">
        <div class="row">
          <div class="col-md-10">
            Quisque placerat in dui quis vestibulum. Morbi tempor facilisis aliquam. Suspendisse ac velit ut lectus vehicula finibus imperdiet et leo. Mauris commodo auctor tellus, at lobortis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
            per inceptos himenaeos. Morbi fringilla lectus et urna blandit porta. Aliquam sed dolor gravida tellus pharetra laoreet in vel dolor. Sed cursus lacus vel metus porttitor, sed tempus enim pharetra. Vestibulum malesuada faucibus diam hendrerit
            molestie. Aenean eget malesuada ipsum. Phasellus vitae erat at tellus aliquet sollicitudin. Integer nec neque nec felis egestas efficitur. Aliquam sodales est neque, in vulputate orci cursus in. Nunc ac leo suscipit, porttitor tellus non,
            fermentum eros. Sed aliquet elit at est consequat, et semper risus porta.
            <br>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">File1 (39.5 MB)</a>
            <br>
            <i aria-hidden="true" class="fa fa-file-pdf-o"></i> <a href="#">Formulário de Participação (101 KB)</a>
          </div>
          <div class="col-md-2">
            <button class="pull-right" href="#">Test</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$(function() {
  $('a.accordion-toggle').click(function(e) {
    e.preventDefault();
    if (!$(this).parent().hasClass('accordionPannelActive')) {
      $('.accordion-heading').removeClass('accordionPannelActive').find('a').removeClass('accordionPannelActive');
      $(this).parent().addClass('accordionPannelActive').find('a').addClass('accordionPannelActive');
    } else {
      $('.accordion-heading').removeClass('accordionPannelActive').next().removeClass('accordionPannelActive');
      $(this).parent().find('a').removeClass('accordionPannelActive');
    }
  });
});

CSS

.accordionPannelActive {
      background-color: #8dc640!important;
      color: white !important;
}

a.accordion-title:focus {
      color: inherit;
      text-decoration: none;
}

.panel-default > .panel-heading {
      background-image: none;
}

a.accordion-title:hover {
      color: inherit;
      background-color: inherit;
      text-decoration: none;
}

.panel-default > .panel-heading {
      background-image: none;
}
.panel-title{
      display:block;
}

需求： jquery.min.js、jquery.min.js、bootstrap.min.css、bootstrap-theme.min.css 和 bootstrap.min.js

于 2016-07-18T15:53:53.133 回答
-1

这对我有用..

$('.panel-default').on('show.bs.collapse', function () {
     $('.panel-heading').addClass('active');
});

$('.panel-default').on('hide.bs.collapse', function () {
     $('.panel-heading').removeClass('active');
});
于 2014-06-25T17:52:30.007 回答