如何使引导下拉列表在悬停时起作用

Question

如何在高于767px的分辨率下悬停引导下拉列表。

我看到了这个问题How to make twitter bootstrap menu dropdown on hover rather than click，暗示了这个

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

但问题是，我必须禁用点击效果，仅限大于767px的分辨率。即低于此分辨率（特别是在移动设备中），它必须处理引导程序通常所做的点击。

到目前为止我尝试了什么

将css设为此

ul.nav li.dropdown:hover > ul.dropdown-menu,
ul.nav li.dropdown:active > ul.dropdown-menu 
{
    display: block;    
}

并更改

<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"/>

到

<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle=""/>

现在它禁用分辨率中的点击＆gt; 767px， 并且还可以解决分辨率上的点击事件＆lt; 767px 这里的问题是它在解决方案之前并没有像以前那样完美地工作。 767px。

它是我能来的最近的，任何帮助都可以被欣赏。

Answer 1

你可以用媒体查询包装你的css代码：

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

要停用点击：

$('.nav .dropdown > a').click(function(event){
    event.preventDefault();
});