仅当宽度大于780px时在悬停时显示的Jquery下拉菜单

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();
    });
}

使用此代码，如果我的宽度小于780px，当我打开网站时，我会看到移动导航栏版本，当我点击时，下拉菜单就会出现，如果我将窗口大小调整到大于780px，下拉菜单就会在悬停时打开(这正是我想要的！)。

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

我的英语很抱歉，希望有人能帮我。

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

为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

我解决了这个问题！在尝试了很多次之后，我想起来我可以用If做同样的事情。

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

所以我使用了一个媒体查询，它是有效的:)