twitter-bootstrap 自举手风琴菜单

bootstrap accordion menu

提问by Manindra Singh

My problem is that i used the bootstrap accordion menu for my wordpress site.

我的问题是我在 wordpress 网站上使用了 bootstrap 手风琴菜单。

Every menu item has sub menus as links so whenever I clicked on any link it toke me to another page meaning the page reloaded, but the accordion menu gets closed and I want it to remain open with the selected link.

每个菜单项都有子菜单作为链接，所以每当我点击任何链接时，它都会将我带到另一个页面，这意味着页面会重新加载，但手风琴菜单会关闭，我希望它通过选定的链接保持打开状态。

My whole site is on bootstrap. I am new to wordpress so don't even know that which jquery function is working on this accordion menu.

我的整个网站都在引导程序上。我是 wordpress 的新手，所以我什至不知道哪个 jquery 函数在这个手风琴菜单上工作。

Here is my code for accordion menu:

这是我的手风琴菜单代码：

<div id="accordion2" class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">B.A Honours Programmes</a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="http://pearlacademy.com/wp/fashion-design/" class="accordion-toggle">Fashion Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Styling & Image Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Textile Design for Fashion And Interiors</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Communication Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Interior Architecture and Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Interior Product Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Jewellery Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Media Communication</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Business Management</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Marketing and Retailing Management</a>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Postgraduate Diploma Programmes</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Textile Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Retail</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Marketing</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Garment Manufacturing</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Merchandising</a>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Masters Programmes</a>
        </div>
        <div id="collapseThree" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">MA Design(Fashion and Textile)</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">MA Fashion Marketing</a>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">Professional Programmes</a>
        </div>
        <div id="collapseFour" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Luxury Brands</a>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion2">Diploma Programmes</a>
        </div>
        <div id="collapseFive" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Visual Merchandising & Store Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Professional Photography with BTK Germany</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Digital Film Making</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Creative Graphic Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Styling for Interiors</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion & Lifestyle Ecommerce</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Fashion Media Makeup</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">New Media Design</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Retail Operations</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Entrepreneurship and Business Management for Creative Industries</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Apparel Manufacturing</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Interior Styling</a>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseSix" data-toggle="collapse" data-parent="#accordion2">Certificate Programmes</a>
        </div>
        <div id="collapseSix" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Creative Fashion & Technology in Women's Wear</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Apparel Marketing & Merchandising</a>
            </div>
            <div class="accordion-inner">
                <a href="#" class="accordion-toggle">Personal Styling & Grooming</a>
            </div>
        </div>
    </div>
</div>

Here is the CSS for accordion menu resides in bootstrap.css:

这是位于bootstrap.css 中的手风琴菜单 CSS ：

.accordion {
  margin-bottom: 20px;
}
.accordion-group {
  margin-bottom: 2px;
  /*border: 1px solid #e5e5e5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;*/
}
.accordion-heading {
  border-bottom: 0;
  background-color:#cccccc;
}
.accordion-heading .accordion-toggle {
  display: block;
  padding: 2px 4px;
  text-decoration:none;
  /*background-color:#e52b27;*/
}
.accordion-toggle {
  cursor: pointer;
  color:#5e5e5e;
  text-decoration:none;
}
.accordion-inner {
  padding: 2px 4px;
  border-top: 1px solid #e5e5e5;
  text-decoration:none;
}

and I think this is the JS working on it (not sure):

我认为这是处理它的 JS（不确定）：

/* COLLAPSE PUBLIC CLASS DEFINITION
* ================================ */

 var Collapse = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.collapse.defaults, options)

    if (this.options.parent) {
      this.$parent = $(this.options.parent)
    }

    this.options.toggle && this.toggle()
  }

  Collapse.prototype = {

    constructor: Collapse

  , dimension: function () {
      var hasWidth = this.$element.hasClass('width')
      return hasWidth ? 'width' : 'height'
    }

  , show: function () {
      var dimension
        , scroll
        , actives
        , hasData

      if (this.transitioning) return

      dimension = this.dimension()
      scroll = $.camelCase(['scroll', dimension].join('-'))
      actives = this.$parent && this.$parent.find('> .accordion-group > .in')

      if (actives && actives.length) {
        hasData = actives.data('collapse')
        if (hasData && hasData.transitioning) return
        actives.collapse('hide')
        hasData || actives.data('collapse', null)
      }

      this.$element[dimension](0)
      this.transition('addClass', $.Event('show'), 'shown')
      $.support.transition && this.$element[dimension](this.$element[0][scroll])
    }

  , hide: function () {
      var dimension
      if (this.transitioning) return
      dimension = this.dimension()
      this.reset(this.$element[dimension]())
      this.transition('removeClass', $.Event('hide'), 'hidden')
      this.$element[dimension](0)
    }

  , reset: function (size) {
      var dimension = this.dimension()

      this.$element
        .removeClass('collapse')
        [dimension](size || 'auto')
        [0].offsetWidth

      this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')

      return this
    }

  , transition: function (method, startEvent, completeEvent) {
      var that = this
        , complete = function () {
            if (startEvent.type == 'show') that.reset()
            that.transitioning = 0
            that.$element.trigger(completeEvent)
          }

      this.$element.trigger(startEvent)

      if (startEvent.isDefaultPrevented()) return

      this.transitioning = 1

      this.$element[method]('in')

      $.support.transition && this.$element.hasClass('collapse') ?
        this.$element.one($.support.transition.end, complete) :
        complete()
    }

  , toggle: function () {
      this[this.$element.hasClass('in') ? 'hide' : 'show']()
    }

  }

回答by Manindra Singh

Here's what you should do. Throw away the code you've written, because you're misusing accordions. To make a navigation with dropdowns, here's an example.

这是你应该做的。扔掉你写的代码，因为你在滥用手风琴。要使用下拉菜单进行导航，这是一个示例。

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
            <a class="brand" href="#">Title</a>
            <div class="nav-collapse subnav-collapse">
                <ul class="nav">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Link</a>
                    </li>
                    <li>
                        <a href="#">Link</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li class="nav-header">
                                Nav header
                            </li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                            <li>
                                <a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.nav-collapse -->
        </div>
    </div><!-- /navbar-inner -->
</div>

EDIT:

编辑：

To open an accordion on page load, this should work:

要在页面加载时打开手风琴，这应该有效：

Assign the accordion you want to be opened class="open-accordion"and add to your javascript file or within <script></script>the following snippet:

分配您要打开的手风琴class="open-accordion"并将其添加到您的 javascript 文件或<script></script>以下代码段中：

$('.open-accordion').on('hidden', function () {
$('.open-accordion').collapse('show')
})

I haven't tested it, but should work according to bootstrap documentation.

我还没有测试过，但应该根据引导程序文档工作。

回答by shamim s

<ul class="accordion">
    <li id="one" class="files">
        <a href="#one">Admin Video</a>
        <ul class="sub-menu">
            <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/addvideo"><em>01</em>Add video</a></li>
            <li><a href="<?php echo base_url();?>index.php/admin/adminvideo"><em>02</em>List Video</a></li>
            <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/categorys"><em>03</em>Video Categories</a></li>                 
        </ul>
    </li>

    <li id="two" class="mail">
        <a  href="#two">Users</a>
        <ul class="sub-menu">
            <li><a href="<?php echo base_url();?>index.php/admin/admin/listsubs"><em>01</em>Subscribers List</a></li>
            <li><a href="<?php echo base_url();?>"><em>02</em>User Video Suggestion</a></li>
        </ul>
    </li>


    <li id="three" class="cloud">
        <a class="active" href="#three">Background Image options</a>
        <ul class="sub-menu">
            <li><a href="<?php echo base_url();?>index.php/admin/adminsettings"><em>01</em>Add</a></li>
            <li><a href="<?php echo base_url();?>index.php/admin/adminsettings/listbgs"><em>02</em>List</a></li>
        </ul>
    </li>
</ul>

$(document).ready(function() {

$(document).ready(function() {

var accordion_head = $('.accordion > li > a'),
    accordion_body = $('.accordion li > .sub-menu');
$.each($(".accordion > li > a"), function(){
    if($(this).attr('class') == 'active')
    {
        $(this).next().slideDown('normal');
    }           
});



// Open the first tab on load

//accordion_head.first().addClass('active').next().slideDown('normal');

// Click function

accordion_head.on('click', function(event) {

    // Disable header links

    event.preventDefault();

    // Show and hide the tabs on click

    if ($(this).attr('class') != 'active'){
        accordion_body.slideUp('normal');
        $(this).next().stop(true,true).slideToggle('normal');
        accordion_head.removeClass('active');
        $(this).addClass('active');
    }

});

});

});