Twitter bootstrap 如何制作引导'；s导航下拉列表是否可以平滑地上下滑动？

我的导航是Twitter的常规引导，只是我想有一些幻灯片效果

---

如何使引导导航上的下拉列表平滑地上下滑动？

好吧，这是通过根据我从中收集的内容切换类名来完成的

如果有的话，您必须正确地手动编辑下拉列表JS，以支持打开和关闭菜单的自定义动画设置。这是非常可行的，我认为这样做会奏效：

警告这尚未测试

---

编辑：这将导致引导依赖jQuery.effects。只要提醒一下。

如果有人需要-检查我的解决方案。修改了下面的bootstrap-dropdown.js。 我使用滑动切换，而不是将display:none切换到display:block。为了使引导CSS不相互作用，我将打开菜单项的类从“打开”更改为“打开”

/*============================================================
*bootstrap-dropdown.js v2.3.0
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
*版权所有2012推特公司。
*
*根据Apache许可证2.0版（以下简称“许可证”）获得许可；
*除非遵守许可证，否则不得使用此文件。
*您可以通过以下方式获得许可证副本：
*
* http://www.apache.org/licenses/LICENSE-2.0
*
*除非适用法律要求或书面同意，软件
*根据许可证进行的分发是按“原样”进行分发的，
*无任何明示或暗示的保证或条件。
*请参阅许可证以了解管理权限和权限的特定语言
*许可证下的限制。
* ============================================================ */
!函数（$）{
“使用严格”；/jshint；\ux；
/*下拉类定义
* ========================= */
变量切换=“[数据切换=下拉]”
，下拉菜单=函数（元素）{
var$el=$（element）.on（'click.dropdown.dataapi'，this.toggle）
$（'html'）。on（'click.dropdown.dataapi'，函数（）{
$（切换）.next（'ul'）.slideToggle（）；
$el.parent（）.removeClass（'opened'）
})
}
Dropdown.prototype={
构造函数：下拉列表
，切换：功能（e）{
变量$this=$（this）
，$parent
，我很活跃
if（$this.is（'.disabled，：disabled'））返回
$parent=getParent（$this）
isActive=$parent.hasClass（'opened'）
clearMenus（）
如果（！isActive）{
$（this）.next（'ul'）.slideToggle（）；
$parent.toggleClass（'opened'）
}
$this.focus（）
返回错误
}
，向下键：功能（e）{
var$这个
，$items
，$active
，$parent
，我很活跃
指数
如果（！/（38 | 40 | 27）/.test（e.keyCode））返回
$this=$（this）
e、 预防默认值（）
e、 停止传播（）
if（$this.is（'.disabled，：disabled'））返回
$parent=getParent（$this）
isActive=$parent.hasClass（'opened'）
如果（！isActive | |（isActive&&e.keyCode==27））{
如果（e.which==27）$parent.find（toggle.focus）（）
返回$this。单击（）
}
$items=$（'[role=menu]li:not（.divider）：可见a'，$parent）
如果（！$items.length）返回
index=$items.index（$items.filter（':focus'））
如果（e.keyCode==38&&index>0）索引--//向上
如果（e.keyCode==40&&index<$items.length-1）index++//down
如果（！~index）index=0
$items
.eq（指数）
.focus（）
}
}
函数clearMenus（）{
$（切换）。每个（函数（）{
if（getParent（$（this））.hasClass（'opened'））{
$（this）.next（'ul'）.slideToggle（）；
getParent（$（this））.removeClass（'opened'）；
}
})
}
函数getParent（$this）{
变量选择器=$this.attr（'data-target'））
，$parent
如果（！选择器）{
选择器=$this.attr（'href'）
选择器=选择器&&/#/.test（选择器）&&selector.replace（/.*（=#[^\s]*$）/，“”）//ie7的条带
}
$parent=选择器&&$（选择器）
if（！$parent | |！$parent.length）$parent=$this.parent（）
返回$parent
}
/*下拉插件定义
* ========================== */
var old=$.fn.dropdown
$.fn.dropdown=函数（选项）{
返回此。每个（函数（）{
变量$this=$（this）
，data=$this.data（'dropdown'））
如果（！data）$this.data（'dropdown'，（data=newdropdown（this）））
if（typeof option=='string'）数据[option]。调用（$this）
})
}
$.fn.dropdown.Constructor=下拉列表
/*下拉列表没有冲突
* ==================== */
$.fn.dropdown.noConflict=函数（）{
$.fn.dropdown=旧
还这个
}
/*应用于标准下拉元素
* =================================== */
$（文件）
.on（'click.dropdown.dataapi'，ClearMenu）
.on（'click.dropdown.data api'，'.dropdown form'，函数（e）{e.stopPropagation（）}）
.on（'.dropdown menu'，函数（e）{e.stopPropagation（）}）
.on（'click.dropdown.dataAPI'，toggle，dropdown.prototype.toggle）
.on（'keydown.dropdown.dataAPI'，toggle+'，[role=menu]'，dropdown.prototype.keydown）
}（window.jQuery）；

我还没有检查这是否适用于较旧版本的引导，但对于v3，单击下拉开关时，您可以连接到触发的事件。这样，您就不必编辑源JS代码

$(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();
});

---

好极了很高兴我能帮忙。可能是

$(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();
});