Twitter的引导：将一个类来开手风琴冠军(Twitter bootstrap: adding a

2019-06-25 06:27发布

站内文章 / 前端开发
21 0 0

我是一个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>

所以我一直在寻找的是增加了。主动类a.accordion拨动只要打开菜单（手风琴式的），然后让它走另一次选择。 我看了看文档，以引导在这里 ，但它似乎没有帮我出了很多（因为我不知道该怎么做的

$（ '＃myCollapsible'）。在（ '隐藏'，函数（）{//做一些事情...}）

或者将其放置）我也试过.addClass（）jQuery的加法器，但我只能得到JavaScript版本的document.getElementById（“手风琴标题”）的className + =“的NewClass”。 工作（如果我给了手风琴组冠军的ID，但在这种情况下，将有多个手风琴组），当我把剧本div层之后。

Answer 1:

您可以使用此塌方事件。 

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



Answer 2:

这里是我解决这个问题。 基于上面的一些伟大的答案的，但适应与引导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');
  });


Answer 3:

我也希望增加“活动”类或类似的，但检查过程中我注意到，当不活动的所有环节有一个类的“崩溃”被选中的标签/链接时被删除，所以我干脆tageted标签不“崩溃”类。



Answer 4:

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

如果手风琴状标题已经没有一类的活动的，所有的手风琴标题及身体失去活动类，并且已经点击了一个和它对应的身体标记将获取类添加。

如果已经拥有类活动的（所以如果已经打开，并且被点击），则活动类被删除，没有什么事情发生。



Answer 5:

简单地检查由BS代码添加折叠类： 

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


Answer 6:

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

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


Answer 7:

我想，如果你把这个在您的JavaScript它的工作： 

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

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


Answer 8:

类主动不给项目becouse在减档此类改变，你必须给它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' })
     });
        });


Answer 9:

这种使用引导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');
   });
        });


Answer 10:

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，引导-theme.min.css和bootstrap.min.js



Answer 11:

这适用于我.. 

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

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


文章来源: Twitter bootstrap: adding a class to the open accordion title
标签： javascript jquery jquery-ui twitter-bootstrap accordion
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~