使用引导切换侧边栏菜单的问题

Issues in toggle sidebar menu with bootstrap

本文关键字:侧边栏 菜单 问题      更新时间:2023-09-26

我正在使用shopify网站,在该侧边栏菜单中,需要像这样的工作 链接 http://jsfiddle.net/wasimkazi/CGsJH/2/

我的意思是,当单击一个链接时,应该隐藏另一个链接(如果此链接打开

)。

这是使用的引导程序:

!function ($) {
  "use strict"; // jshint ;_;

 /* 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']()
    }
  }

 /* COLLAPSIBLE PLUGIN DEFINITION
  * ============================== */
  $.fn.collapse = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('collapse')
        , options = typeof option == 'object' && option
      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
  $.fn.collapse.defaults = {
    toggle: true
  }
  $.fn.collapse.Constructor = Collapse

 /* COLLAPSIBLE DATA-API
  * ==================== */
  $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this = $(this), href
      , target = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^'s]+$)/, '') //strip for ie7
      , option = $(target).data('collapse') ? 'toggle' : $this.data()
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    $(target).collapse(option)
  })
}(window.jQuery);

由于您无法修改 HTML 以使其成为手风琴,因此可以使用 show 事件进行折叠并隐藏已显示的部分。

$(document).ready(function () {
    $('.collapse').on('show.bs.collapse', function () {
        $('.collapse.in').collapse('hide');
    })
   })

见小提琴