jQuery 禁用函数

Question

在我的网站上，我使用 Bootstrap 并有一个带下拉菜单的导航菜单。

现在我添加了一些 JS 代码，以便在悬停时打开下拉菜单。

    <!-- MouseOver on menu -->
        $(function() {
            $("li.dropdown").hover(
                function(){ $(this).addClass('open') },
                function(){ $(this).removeClass('open') }
            );
        });

    },     

我还使用enquire仅在桌面上时激活此悬停效果。

<!-- Activate javascript based on mediaquery -->
$(document).ready(function() {
    enquire.register("screen and (min-width:40em)", {

        // If supplied, triggered when a media query matches.
        match : function() {
        <!-- MouseOver on menu -->
            $(function() {
                $("li.dropdown").hover(
                    function(){ $(this).addClass('open') },
                    function(){ $(this).removeClass('open') }
                );
            });

        },

        // If supplied, triggered when the media query transitions from a matched state to an unmatched state.
        unmatch : function() {
            <!-- MouseOver on menu -->
            $(function() {
                $("li.dropdown").unbind("hover");
            });

        }
    });
});

现在 enquire.js 部分工作正常。因此，当用户位于桌面上时，.hover 属性将赋予该功能。当他使用移动设备时，下面的部分就会被执行。但是，如何再次去掉这个 .hover 属性？

我正在尝试解除绑定(bind)或取消设置该功能，但这似乎不起作用。

            $(function() {
                $("li.dropdown").unbind("hover");
            });

也许这是一个基本问题，但我不擅长 jQuery，而且我有点卡住了。

Answer 1

我检查了文档 http://api.jquery.com/hover并且需要具体的解绑方式:

$("li.dropdown").off( "mouseenter mouseleave" );

另外，我对您的具体实例可能是错误的，但您可能可以直接使用 CSS 而不是 JavaScript/Enquire。

旁注:我认为您不需要匹配/不匹配中的额外 $(function(){ ... }) 包装器，因为您已经在 .ready 中执行了此操作 方法。