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属性？

我正在试图取消绑定或取消设置该功能，但这似乎不起作用。

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

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

Answer 1

我查看了http://api.jquery.com/hover处的文档，您需要取消绑定特定方式：

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

我也可能在您的特定实例上出错了，但您可以直接使用CSS而不是JavaScript / Inquire。

旁注：我不认为你需要匹配/不匹配的额外$(function(){ ... })包装，因为你已经在.ready方法中执行了这个。

Answer 2

你应该使用.on和.off JQuery函数：

这是一个如何运作的例子：

附加活动：

$('#myDiv').on(
 {
   mouseenter: function()
   {
      $(this).css('background-color','blue');
   },
    mouseleave: function()
   {
    $(this).css('background-color','red');
   }});

要再次删除该事件：

 $('#myDiv').off(' mouseentermouseleave');

这是一个JSFiddle：http://jsfiddle.net/loanburger/sv5wLrkq/

所以在你的情况下你会这样做：

$("li.dropdown").on(
 {
   mouseenter: function()
   {
    // your code
   },
    mouseleave: function()
   {
  // your code
   }});

然后删除事件监听器：

$('#li.dropdown').off(' mouseenter mouseleave');

jQuery禁用一个函数

2 个答案: