希望在较小的窗口中保持下拉菜单的状态

wanted to maintain the state of drop down menu in smaller wiondows

本文关键字:下拉菜单 状态 窗口 希望      更新时间:2023-09-26

我正在使用twitter引导我的导航栏…当我缩小浏览器窗口时,您可以在顶部看到一个按钮....当你点击按钮,你会看到一个下拉菜单....但是当我点击下拉菜单中的链接....这要翻到另一页了。但是下拉菜单会崩溃....如何保持下拉菜单的状态,即使它移动到另一个页面....

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

 /* DROPDOWN CLASS DEFINITION
  * ========================= */
  var toggle = '[data-toggle=dropdown]'
    , Dropdown = function (element) {
        var $el = $(element).on('click.dropdown.data-api', this.toggle)
        $('html').on('click.dropdown.data-api', function () {
          $el.parent().removeClass('open')
        })
      }
  Dropdown.prototype = {
    constructor: Dropdown
  , toggle: function (e) {
      var $this = $(this)
        , $parent
        , isActive
      if ($this.is('.disabled, :disabled')) return
      $parent = getParent($this)
      isActive = $parent.hasClass('open')
      clearMenus()
      if (!isActive) {
        $parent.toggleClass('open')
      }
      $this.focus()
      return false
    }
  , keydown: function (e) {
      var $this
        , $items
        , $active
        , $parent
        , isActive
        , index
      if (!/(38|40|27)/.test(e.keyCode)) return
      $this = $(this)
      e.preventDefault()
      e.stopPropagation()
      if ($this.is('.disabled, :disabled')) return
      $parent = getParent($this)
      isActive = $parent.hasClass('open')
      if (!isActive || (isActive && e.keyCode == 27)) {
        if (e.which == 27) $parent.find(toggle).focus()
        return $this.click()
      }
      $items = $('[role=menu] li:not(.divider):visible a', $parent)
      if (!$items.length) return
      index = $items.index($items.filter(':focus'))
      if (e.keyCode == 38 && index > 0) index--                                        // up
      if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
      if (!~index) index = 0
      $items
        .eq(index)
        .focus()
    }
  }
  function clearMenus() {
    $(toggle).each(function () {
      getParent($(this)).removeClass('open')
    })
  }
  function getParent($this) {
    var selector = $this.attr('data-target')
      , $parent
    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^'s]*$)/, '') //strip for ie7
    }
    $parent = selector && $(selector)
    if (!$parent || !$parent.length) $parent = $this.parent()
    return $parent
  }

  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */
  var old = $.fn.dropdown
  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('dropdown')
      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }
  $.fn.dropdown.Constructor = Dropdown

 /* DROPDOWN NO CONFLICT
  * ==================== */
  $.fn.dropdown.noConflict = function () {
    $.fn.dropdown = old
    return this
  }

  /* APPLY TO STANDARD DROPDOWN ELEMENTS
   * =================================== */
  $(document)
    .on('click.dropdown.data-api', clearMenus)
    .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.dropdown-menu', function (e) { e.stopPropagation() })
    .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);

页面被重新加载到一个新的页面,新的内容(包括导航栏)等