Twitter 引导程序:向打开的手风琴标题添加一个类

问题描述

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

代码如下:

<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="">打开链接1</a></li><li id="" class="sidelink"><a href="">打开链接2</a></li><li id="" class="sidelink"><a href="">打开链接3</a></li></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/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"; 当我把脚本放在 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/

I am a jquery/javascript newbie. What I want to do is add a class to the open accordion title, and remove it when i open another.

heres the code:

<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-->

The scripts I have attached with the page are

<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>

So what I was looking for was to add the .active class to a.accordion-toggle whenever the menu is open (accordion style), and then have it go away once another is selected. I've looked at the documentation to bootstrap here, but it doesnt seem to help me out a lot (since I don't know what to do with the

or where to place it) I've also tried the .addClass() jquery adder, but I could only get the javascript version document.getElementById("accordion-heading").className += " newClass"; to work (if I gave the accordion group title an ID, but in this case there will be multiple accordion groups) when I put the script right after the div layer.

解决方案

You can use the Collapse events for this.

$(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');
    });

});​

Here's a JsFiddle http://jsfiddle.net/D2RLR/251/

这篇关于Twitter 引导程序:向打开的手风琴标题添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！