Twitter 引导程序:在开放手风琴标题中添加一个类

Twitter bootstrap: adding a class to the open accordion title

本文关键字：添加一个标题引导程序手风琴放手 Twitter 更新时间：2023-09-26

我是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-切换中，然后在选择另一个菜单后让它消失. 我已经查看了此处引导的文档，但它似乎对我没有太大帮助（因为我不知道如何处理

$（'#myCollapsible'）.on（'hidden'， function （） {//do something... }）

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

您可以使用 Collapse 事件来实现此目的。

$(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/

这是我对这个问题的解决方案。基于上面的一些很好的答案，但适应了 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');
  });

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

我尝试过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');
        }
    });
});

如果手风琴标题已经没有活动类，

则所有手风琴标题和正文都将失去活动类，并且已单击的类及其相应的正文标记将添加该类。

如果它已经

激活了该类（因此，如果它已经打开并被单击），则活动类将被删除，并且不会发生任何其他操作。

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

$('a.accordion-toggle').on('click', function () {
    if( $(this).hasClass('collapsed') !== true ){
        $(this).removeClass('active');
    }else{
        $(this).addClass('active');
    }
});

我认为这是

迄今为止最简单的方法。

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

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

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

类处于活动状态，不要在此类更改的更少文件中提供该项目你必须给它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' })
     });
        });

这适用于我使用 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');
   });
        });

> 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

这对

我有用。

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