Javascript jQuery引导下拉菜单正常悬停并单击以查看小型设备引导3_Javascript_Jquery_Css_Twitter Bootstrap

Javascript jQuery引导下拉菜单正常悬停并单击以查看小型设备引导3

javascript jquery css twitter-bootstrap

Javascript jQuery引导下拉菜单正常悬停并单击以查看小型设备引导3,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我使用的是带下拉菜单的典型引导导航我希望下拉列表显示在悬停上，隐藏在鼠标上。但是当设备宽度小于979px时，我希望在单击时显示下拉列表，而不是悬停我编写了一些jQuery来实现这一点。它工作正常，但当我将浏览器宽度减小到979px以下时，它会显示悬停下拉列表。我想这只是显示下拉点击。具有讽刺意味的是，如果我将浏览器宽度保持在979px以下，则它不会显示在悬停状态我的jQuery： $(document).ready(function() { if ($(window).width(

我使用的是带下拉菜单的典型引导导航

我希望下拉列表显示在悬停上，隐藏在鼠标上。但是当设备宽度小于979px时，我希望在单击时显示下拉列表，而不是悬停

我编写了一些jQuery来实现这一点。它工作正常，但当我将浏览器宽度减小到979px以下时，它会显示悬停下拉列表。我想这只是显示下拉点击。具有讽刺意味的是，如果我将浏览器宽度保持在979px以下，则它不会显示在悬停状态

我的jQuery：

$(document).ready(function() {
    if ($(window).width() < 979) {
    $(".md-nav ul.nav li.dropdown").click(function () {
        $('li.dropdown > a').addClass('dropdown-toggle');
        $('li.dropdown > a').attr('data-toggle','dropdown');

    });
    }

    if ($(window).width() > 979) {
        $(".md-nav li.dropdown").hover(function () {
            $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(400).show(0);
        }, function () {
            $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(500).hide(0);
        }); 
    }

  });

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<979）{
$（“.md nav ul.nav li.dropdown”）。单击（函数（）{
$（'li.dropdown>a'）.addClass（'dropdown-toggle'）；
$（'li.dropdown>a'）.attr（'data-toggle'，'dropdown'）；
});
}
如果（$（窗口）.width（）>979）{
$（“.md导航li.dropdown”）.hover（函数（）{
$（“.md nav li.dropdown:hover>.dropdown menu”）.stop（真，真）。delay（400）。show（0）；
}，函数（）{
$（“.md nav li.dropdown:hover>.dropdown menu”）.stop（真，真）。delay（500）。hide（0）；
}); 
}
});

用于导航的我的HTML：

 <nav class="navbar navbar-default md-nav" role="navigation">
     <div class="container-fluid">
        <select class="nav-sel">
            <option value="Vous Etes">Vous Etes</option>
            <option value="Vous Etes">Vous Etes</option>
            <option value="Vous Etes">Vous Etes</option>
            <option value="Vous Etes">Vous Etes</option>
        </select>

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav nav nav-tabs">
                <li class="dropdown"><a href="#">Ministére</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
                            <li><a href="#">Les Féderations</a></li>
                            <li><a href="#">Le diréct</a></li>
                            <li><a href="#">Emplois & Mériers</a></li>
                            <li><a href="#">Grand Evénements</a></li>
                        </ul>
                        <img src="img/athlete-img1.jpg" alt="athlete running" />
                    </div>
                </li>
                <li class="dropdown"><a href="#">Sport</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
                            <li><a href="#">Les Féderations</a></li>
                            <li><a href="#">Le diréct</a></li>
                            <li><a href="#">Emplois & Mériers</a></li>
                            <li><a href="#">Grand Evénements</a></li>
                        </ul>
                        <img src="img/athlete-img1.jpg" alt="athlete running" />
                    </div>
                </li>
                <li class="dropdown"><a href="#">Jeunesse</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
                            <li><a href="#">Les Féderations</a></li>
                            <li><a href="#">Le diréct</a></li>
                            <li><a href="#">Emplois & Mériers</a></li>
                            <li><a href="#">Grand Evénements</a></li>
                        </ul>
                        <img src="img/athlete-img1.jpg" alt="athlete running" />
                    </div>
                </li>
                <li class="dropdown"><a href="#">Publications</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
                            <li><a href="#">Les Féderations</a></li>
                            <li><a href="#">Le diréct</a></li>
                            <li><a href="#">Emplois & Mériers</a></li>
                            <li><a href="#">Grand Evénements</a></li>
                        </ul>
                        <img src="img/athlete-img1.jpg" alt="athlete running" />
                    </div>
                </li>
                <li class="dropdown"><a href="#">Mediatheque</a>
                    <div class="dropdown-menu">
                        <ul>
                            <li><a href="#">Promotion</a></li>
                            <li><a href="#">Prévention</a></li>
                            <li><a href="#">Les Féderations</a></li>
                            <li><a href="#">Le diréct</a></li>
                            <li><a href="#">Emplois & Mériers</a></li>
                            <li><a href="#">Grand Evénements</a></li>
                        </ul>
                        <img src="img/athlete-img1.jpg" alt="athlete running" />
                    </div>
                </li>
                <li><a href="#">Espace Medias</a></li>
           </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>


喂
喂
喂
喂

发生这种情况是因为您当前的逻辑如下：

检查屏幕大小（宽度）

如果

宽度小于979，则为单击创建事件处理程序


如果宽度
大于979，则为悬停
创建事件处理程序
简言之，这意味着在打开页面时仅执行一次宽度检查，并相应地附加事件处理程序。为了克服这个问题，我建议使用另一种逻辑：
为单击和悬停添加事件处理程序

如果浏览器宽度小于979px
show下拉列表，则单击
如果浏览器宽度大于（或等于）至979px
显示下拉列表，则悬停
Javascript
$(".md-nav ul.nav li.dropdown").click(function () {
    if ($(window).width() < 979) {
        $('li.dropdown > a').addClass('dropdown-toggle');
        $('li.dropdown > a').attr('data-toggle','dropdown');            
    }
});

$(".md-nav li.dropdown").hover(function () {
    if ($(window).width() >= 979) {
        $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(400).show(0);
    }
}, function () {
    if ($(window).width() >= 979) {
        $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(500).hide(0);
    }
});

$(window).on('resize', function (e) {
    // reattach event handler if necessary
});

但是，请记住，使用这种方法时，您需要删除以前的事件处理程序，否则它们将堆叠在一起。
这种方法是有缺陷的。屏幕大小和悬停性并没有本质上的联系。我们不能写这样的东西吗“它应该总是在悬停时显示下拉菜单，除非屏幕大小小于979px，否则它应该只在单击时显示下拉菜单”？存在大屏幕的平板电脑。这种方法存在一个问题，即除非调整浏览器大小，否则默认情况下，悬停和单击都不会显示下拉菜单。有没有一种方法可以写出类似“如果悬停时屏幕大小小于979px，则什么都不做”这样的内容？这将覆盖上一个悬停函数。我认为这会解决这个问题problem@AlexZahir这很奇怪，应该是这样的。由于缺少样式表，我无法进行深入测试，但它应该可以工作。“如果悬停时屏幕大小小于979px，则什么都不做”-除了单击较大的屏幕（窗口）不显示下拉列表外，这个片段（应该）正是您要问的。