jquery - Bootstrap 3 下拉菜单 : on Hover and on Click

Question

我的导航栏上几乎所有的链接都是下拉菜单。我希望它们在大屏幕上出现在悬停时，但在小屏幕上出现在点击时。那可能吗？在寻找答案时，我遇到了这个:Bootstrap Menu: Dropdown on Hover for Desktop Only .这对我不起作用，因为我不希望整个下拉菜单在移动设备上不可见；我只希望它在单击而不是悬停时可见。

Answer 1

已编辑 @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 事件的设备上，则当用户点击链接并且点击或点击处理程序处理下拉切换时，将触发点击或点击事件。

为准确起见进行了编辑。