Question

我有一个带有一个（或多个）下拉列表的Bootstrap导航栏。我想在鼠标输出时隐藏一个打开的下拉列表，到目前为止这个非常简单的脚本可以删除“开放”类：

var nav = $(".nav");
nav.children("li").hover(function(){
    console.log("mouse over");
}, function(){
    console.log("mouse out");
    $(this).removeClass("open");
});

这有两个问题：

即使在导航栏崩溃的小型设备上，打开下拉列表也会突然关闭鼠标，因为前一个脚本：这很明显，但这不是一个好的行为......所以我试图利用
hide.bs.dropdown事件，如下：nav.trigger("hide.bs.dropdown");但它根本不起作用，并且不知道为什么......

这是一个Bootply fiddle（您可以在小分辨率下看到错误的行为＃1，点击右上角的智能手机图标）

那么，我怎样才能让它发挥作用？我可以将脚本包装成if ($(window).width() > [my breakpoint here])语句，但我不想依赖于硬编码的brekpoints并直接使用Bootstrap中的内容......

谢谢

Answer 1

如果您希望鼠标悬停鼠标效果主要在桌面上工作，那么让您的下拉菜单在悬停时显示会更容易，这样您就可以使用媒体查询来保持折叠菜单在移动设备上的工作方式相同设备。一些简单的CSS将使这项工作

@media (min-width:769px) {
ul .dropdown:hover > .dropdown-menu {
  display:block;
}
ul .dropdown > .dropdown-menu {
  display:none;
}
}

这里有一个工作示例http://www.bootply.com/PB36wGEPPR#

的bootply

在小型设备上关闭鼠标输出时的Bootstrap导航栏下拉列表是不好的

1 个答案: