How can I make Bootstrap's navigation dropdown

问题:

My navigation is Twitter's regular Bootstrap, except that I'd like to have some slide effects.

How can I make the dropdown on my Bootstrap navigation slide smoothly up and down?

回答1:

Well, it's done by switching a class name according to what I've gathered from http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js..

If anything, you'd have to properly manually edit the dropdown JS to support a custom setup for animations for opening and closing the menus. It's very viable and I think something like this would work: https://gist.github.com/3013002

Warning This has not been tested.

EDIT: This'll cause Bootstrap to rely on jQuery.effects more. Just a heads up.

回答2:

If someone will need - check my solution. Modified bootstrap-dropdown.js below. Rather than switching display:none to display:block, I use slideToggle. And for bootstrap CSS not to interract I've changed class of an opened menu item from "open" to "opened".

/* ============================================================
 * bootstrap-dropdown.js v2.3.0
 * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 * ============================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============================================================ */


!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 () {
          $(toggle).next('ul').slideToggle();
          $el.parent().removeClass('opened')
        })
      }

  Dropdown.prototype = {

    constructor: Dropdown

  , toggle: function (e) {
      var $this = $(this)
        , $parent
        , isActive

      if ($this.is('.disabled, :disabled')) return

      $parent = getParent($this)

      isActive = $parent.hasClass('opened')

      clearMenus()

      if (!isActive) {
        $(this).next('ul').slideToggle();
        $parent.toggleClass('opened')
      }

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

      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 () {
      if (getParent($(this)).hasClass('opened')) {
        $(this).next('ul').slideToggle();
        getParent($(this)).removeClass('opened');
      }
    })
  }

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

回答3:

I haven't checked to see if this works with older versions of Bootstrap, but with v3, you can tie into the events that get fired when the dropdown toggle is clicked. This way you don't have to edit the source JS code.

$(document).on("hide.bs.dropdown", ".dropdown", function (event) {
    $(event.target).find(">.dropdown-menu:first").slideUp();
});

$(document).on("show.bs.dropdown", ".dropdown", function (event) {
    $(event.target).find(">.dropdown-menu:first").slideDown();
});