0

我正在使用 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');但是当我单击下拉列表的父级时，我什至看不到下拉列表

4

1 回答 1

1

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

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

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

于 2013-11-08T10:59:52.467 回答