我的导航栏上几乎所有链接都是下拉列表.我希望它们出现悬停在大屏幕上,但点击更小的屏幕.那可能吗？在我寻找答案时,我遇到了这个问题：
Bootstrap Menu: Dropdown on Hover for Desktop Only.这对我不起作用,因为我不希望整个下拉列表在移动设备上不可见;我只希望它在点击而不是悬停时可见.
解决方法
EDITED
来自@ ouwen-huang的答案很好,但是由于jQuery是bootstrap.js的依赖项,你可以通过将所有要附加的事件添加到空格分隔的引号中来实现jQuery方式：
来自@ ouwen-huang的答案很好,但是由于jQuery是bootstrap.js的依赖项,你可以通过将所有要附加的事件添加到空格分隔的引号中来实现jQuery方式：
$('.dropdown').on('mouseenter mouseleave click tap',function() {
$(this).toggleClass("open");
});
选择器基于标准的Bootstrap标记,直接从文档中获取,如下所示：
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
这里的要点是,如果您使用的是支持鼠标的设备(如没有触摸功能的桌面),则会触发mouseenter / mouseleave事件,并且无需单击即可激活菜单.如果用户不在触发mouseenter / mouseleave事件的设备上,则当用户点击链接并且点击或点击处理程序处理下拉切换时,会触发点击或点击事件.
编辑准确.
