仅当宽度高于 780 像素时才会在悬停时显示 Jquery 下拉菜单答案

【问题标题】：Jquery dropdown menu to show on hover just if width is higher than 780px仅当宽度高于 780 像素时才会在悬停时显示 Jquery 下拉菜单
【发布时间】：2016-08-17 06:14:32
【问题描述】：

我正在使用 Twitter Bootstrap 3 做一个网站。我的导航栏上有一个下拉菜单，如果窗口的宽度高于 780 像素，我想在鼠标悬停时显示该下拉菜单。如果宽度小于 780 像素，我会看到移动菜单版本，所以在这种情况下，我想在导航栏中单击以显示下拉菜单。我在$( 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 像素，下拉菜单将打开悬停（正是我想要的！！！！）。

但是，如果我以高于 780 像素的宽度打开网站（鼠标悬停时会显示下拉菜单）并将窗口调整为低于 780 像素的宽度，移动导航栏将在鼠标悬停时打开，这就是问题所在！

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

编辑：我想我需要做一个 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'); 删除悬停，但是当我点击下拉菜单的父级时，我什至看不到下拉菜单

【问题讨论】：

标签： jquery twitter-bootstrap width

【解决方案1】：

我解决了这个问题！经过多次尝试后，我记得我可以做出与 If 相同的操作

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

所以我使用了媒体查询并且它正在工作:)

【讨论】：