Question

我正在使用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);

但它不起作用。

请帮忙！

** Edit2：**根据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-menu设置为display：block。但是因为我需要为下拉列表设置样式，所以链接和下拉列表之间需要有一些空间（这是必须的），所以我必须找到一个javascript解决方案。或者是一个非常棘手的css解决方案，其中链接和下拉列表之间有大约50px的空间，当用户在链接上盘旋并且下拉列表出现时，当用户试图访问它时，下拉列表不应该消失。希望它有意义并且谢谢。

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

Answer 1

可能更容易选择性地应用悬停，而不是稍后尝试删除它。您可以使用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％支持，因此您希望为没有原生支持的浏览器添加填充：https://github.com/paulirish/matchMedia.js/

如果你正在使用Moderizr，那个polyfill已经包含在该库中，所以你可以随意使用。

Answer 2

我仍然不明白你是否打算在鼠标悬停在下拉元素上时显示“关闭”下拉菜单，部分原因是因为你的问题中没有足够的代码，但这与这个答案无关。 / p>

我认为接近mousenter事件处理部分的一种更简单的方法不是使用off（）/ on（）来取消绑定/绑定特定断点处的事件，而是在事件发生时进行简单的检查。触发。换句话说，就像这样：

$('.dropdown').on('mouseenter', function() {
    if($('.navbar-toggle').css('display') == 'none') {
       $(this).children('.dropdown-menu').show();
    };
});

$('.dropdown-menu').on('click', function() {
    $(this).hide();
});

这是一个工作小提琴：http://jsfiddle.net/jme11/g9JJk/

基本上，在mouseenter事件中，我正在检查菜单切换是否显示，但是如果您愿意，可以在该点检查window.width（）。在我看来，切换元素的显示值更容易理解，它还确保如果您更改“折叠”菜单的媒体查询断点，代码将保持同步而无需更新硬编码值（例如768px）。

单击以关闭菜单不需要检查，因为它在“折叠”菜单下拉列表中触发时没有任何不利影响。

从UX的角度来看，我仍然不喜欢这样。我宁愿点击打开一个菜单而不是点击关闭一个在悬停事件中打开的菜单，但也许你有一些神奇的计划用于触发hide方法的其他方式。也许你打算注册一个mousemove事件，检查鼠标是否在.dropdown + 50px + .dropdown-menu的范围内的任何地方或类似的东西......我真的想知道你打算怎么做（好奇心有点让我害怕）。也许您可以更新代码以显示最终结果。

编辑：感谢您发布解决方案！

如何unbind（）。hover（）而不是.click（）？

2 个答案: