javascript - Bootstrap Accordion 菜单

Question

我的问题是我为我的 wordpress 网站使用了 Bootstrap Accordion 菜单。

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

我的整个网站都处于 Bootstrap 状态。我是 wordpress 的新手，所以甚至不知道哪个 jquery 函数在这个 Accordion 菜单上工作。

这是我的 Accordion 菜单代码:

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

这是 bootstrap.css 中 Accordion 菜单的 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;
}

我认为这是 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']()
    }

  }

Answer 1

这是你应该做的。扔掉你写的代码，因为你在滥用 Accordion 。要使用下拉菜单进行导航，请看这里的示例。

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

编辑:

要在页面加载时打开 Accordion ，这应该可行:

指定要打开的 Accordion class="open-accordion"并添加到您的 javascript 文件或 <script></script> 中以下片段:

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

我还没有测试过它，但根据 Bootstrap 文档应该可以工作。