Question

我正在使用Twitter Bootstrap 3建立一个网站。我的导航栏上有一个下拉列表，如果窗口的宽度高于780px，我想显示鼠标悬停的下拉列表。如果宽度小于780px我看到移动菜单版本，所以在这种情况下我想点击导航栏以显示下拉列表。我已在$( window ).resize(function()和$(document).ready(function()

中获得此代码

if ($(window).width() >= 780) {
    jQuery('ul.nav li.dropdown').hover(function () {
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
    }, function () {
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
    });
}

使用此代码，如果我的宽度小于780像素，当我打开网站时，我看到移动导航栏版本，当我点击进入时，只显示了下拉列表，如果我将窗口调整到超过780像素，则会打开下拉菜单悬停（正是我想要的!!!!）。

但是，如果我打开宽度高于780px的网站（当鼠标悬停时显示下拉列表）并调整窗口宽度低于780px，移动导航栏将在鼠标悬停时打开，这就是问题！

对不起我的英文，希望有人能帮助我。

编辑：我想我需要做一个反转if语句的else语句但是我该怎么做呢？

为Pauix编辑：

function dropdown() {
  if ($(window).width() >= 780) {

    jQuery('ul.nav li.dropdown').hover(function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
    }, function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
    });
}


}

// Execute on load
dropdown();
// Bind event listener
$(window).resize(dropdown);

我尝试了其他一些陈述，我能做的最好就是用$("ul.nav li.dropdown").unbind('mouseenter mouseleave');删除悬停但是当我点击下拉列表的父级时我甚至看不到下拉列表

Answer 1

我解决了这个问题！在经过大量尝试使其成功后，我记得我可以做同样的事情，如果用

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

所以我使用媒体查询并且它正在工作：）

如果宽度高于780px，则在悬停时显示的Jquery下拉菜单

1 个答案: