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

Question

所以在我正在进行的项目中，我希望我的导航的父项是可点击的，以及出现在 :hover 上的下拉菜单。

我找到了这个 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 并且我将浏览器的大小调整为 <992px 时，悬停效果会保留，即使我希望在小于 992px 处于活动状态时显示下拉菜单。有没有办法检测视口的大小调整来解决这个问题？
当视口小于 992 像素时，父项将不再起作用。有没有一种方法可以使父项在双击时可点击？我喜欢这种方式，因为 mobile/tablet 上的人可以点击一次下拉菜单和两次父项。

这是我在 Whosebug 上的第一篇帖子，非常感谢任何人提供的任何帮助。谢谢。

Answer 1

When the viewport is greater than 992px and I resize the browser <992px the hover effect retains even though I would like the dropdown to appear when active at less than 992px. Is there a way to detect the resizing of the viewport to fix this?

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

例如：

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

When the viewport is less than 992px the parent items no longer work. Is there a way to possibly make the parent item clickable on a double click? I'd like it this way because people on mobile/tablet can tap once for dropdown and twice for the parent item.

Ans - 使用 dblclick 事件捕获 doubleclick jquery

的处理程序

例如：

$('yourelementidorclass').dblclick(function(){
    //Do necessary stuffs here
});

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

Bootstrap 3 Dropdown Menu Parent Clickable on Mobile?

wordpress

jquery

responsive-design

drop-down-menu

twitter-bootstrap-3