javascript-如何取消绑定().hover()而不是.click()？

我正在使用Bootstrap 3创建一个站点,并使用一个脚本,通过.hover()函数使下拉菜单显示在悬停菜单上.我试图通过使用enquire.js在小型设备上防止这种情况.我正在尝试使用以下代码在元素上解除.hover()事件的绑定：

$('.dropdown').unbind('mouseenter mouseleave');

这取消了该脚本的.hover的绑定,但显然它也删除了.click()事件(或任何引导程序使用的事件),现在当我将鼠标悬停或单击该元素时,什么也没有发生.

因此,我只想知道如何删除源自该脚本的元素上的.hover(),而不更改其他任何内容.

非常感谢您的帮助.

谢谢！

编辑：这是我如何调用悬停函数的处理程序：

$('.dropdown').hover(handlerIn, handlerOut);

function handlerIn(){
   // mouseenter code
}
function hideMenu() {
   // mouseleave code
}

我正在尝试将其与此代码解除绑定.

$('.dropdown').unbind('mouseenter', showMenu);
$('.dropdown').unbind('mouseleave', hideMenu);

但是它不起作用.

请帮忙！

**编辑2：**根据Tieson T.的回答：

function dropdownOnHover(){
  if (window.matchMedia("(min-width: 800px)").matches) {
    /* the view port is at least 800 pixels wide */
    $('.dropdown').hover(handlerIn, handlerOut);

    function handlerIn(){
       // mouseenter code
    }
    function hideMenu() {
       // mouseleave code
    }
  }
}

$(window).load(function() {
  dropdownOnHover();
});

$(window).resize(function() {
  dropdownOnHover();
});

Tieson T.提供的代码效果最好.但是,当我调整窗口大小时,直到从任何方向到达断点,效果都不会改变.也就是说,如果将窗口加载到800px以上,则会出现悬停效果,但是如果我将窗口缩小,则仍会保留.我试图用window.load和window.resize调用这些函数,但仍然相同.

编辑3：我实际上是在悬停而不是单击上创建Bootstrap下拉列表.这是更新的jsFiddle：http://jsfiddle.net/CR2Lw/2/

请注意：在jsFiddle示例中,我可以使用css：hover属性并将dropdow菜单设置为display：block.但是由于我需要为下拉菜单设置样式,因此链接和下拉菜单之间必须有一定的空间(这是必须的),因此我必须找到一种JavaScript解决方案.或非常棘手的css解决方案,其中链接和下拉菜单之间有大约50px的间距,当用户将鼠标悬停在链接上并且出现下拉菜单时,当用户尝试访问该下拉菜单时下拉菜单不应消失.希望这是有道理的,谢谢.

编辑4-第一个可能的解决方案：http://jsfiddle.net/g9JJk/6/

解决方法:

选择性地应用悬停而不是稍后尝试将其移除可能更容易.您可以使用window.matchMedia,并且仅在浏览器的屏幕尺寸暗示台式机浏览器(或较大的平板电脑)时才应用脚本：

if (window.matchMedia("(min-width: 800px)").matches) {
    /* the view port is at least 800 pixels wide */
    $('.dropdown').on({
        mouseenter: function () {
            //stuff to do on mouse enter
        },
        mouseleave: function () {
            //stuff to do on mouse leave
        }
    });
}
else{
    $('.dropdown').off('mouseenter, mouseleave');
}

由于不100％支持,因此您想为那些没有本机支持的浏览器添加一个polyfill：https://github.com/paulirish/matchMedia.js/

如果您使用的是Moderizr,则该polyfill已包含在该库中,因此非常适合.

标签：jquery-hover,twitter-bootstrap-3,unbind,javascript,jquery
来源： https://codeday.me/bug/20191029/1960047.html