Question

所以在我正在进行的项目中，我希望导航的父项可以点击，同时显示下拉列表：悬停。

我找到了这个jquery脚本，它的效果非常好：

<script>
jQuery(function($) {
    if($(window).width()>992){
        $('.navbar .dropdown').hover(function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

        }, function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

        });

        $('.navbar .dropdown > a').click(function(){
            location.href = this.href;
        });

    }
});
</script>

然而，出现了两个问题：

当视口大于992px并且我调整浏览器大小＆lt; 992px时，即使我希望在小于992px的活动状态下显示下拉列表，也会保留悬停效果。有没有办法检测视口大小以修复此问题？
当视口小于992px时，父项不再有效。有没有办法可以在双击时使父项目可点击？我喜欢这种方式，因为手机/平板电脑上的人可以点按一次下拉菜单，两次点击父项目。

这是我的第一个stackoverflow发布，我真的很感激任何人提供的任何帮助。谢谢。

Answer 1

当视口大于992px并且我调整浏览器大小时＆lt; 992px悬停效果保留，即使我想要下拉列表在低于992px时激活时出现。有没有办法检测到调整视口大小以修复此问题？

答案 - 使用$(window).resize事件捕获浏览器resize

前：

$(window).on('resize',function(){
     if($(this).width()>992){
          //do relative stuffs here
     }
     else{
          //do relative stuffs here
     }
});

当视口小于992px时，父项不再有效。有没有办法可以使双项上的父项可单击点击？我喜欢这种方式，因为手机/平板电脑上的人可以点按一次用于下拉，一次用于父项。

答案 - 使用<{1}}

的 dblclick 事件处理程序捕获doubleclick

例如：

jquery

Bootstrap 3下拉菜单移动设备上的父可点击？

1 个答案: