Question

我想建立一个用户友好的响应式网站，但我不熟悉jQuery。希望你们能帮助我。当屏幕尺寸缩小（最大767px）时，我想禁用jQuery的下拉悬停功能。我唯一想要的是点击功能而不是悬停。

{{1}}

Answer 1

简单的答案是使用jQuery的$（window）.resize事件来检查$（window）.width。但是，根据不同浏览器处理滚动条的方式，可能会有额外的复杂性（请参阅https://www.fourfront.us/blog/jquery-window-width-and-media-queries）。此外，通过绑定和解除绑定，悬停事件不起作用。悬停事件实际上只是mouseenter和mouseleave事件的直接实现。不过，以下内容对您有用。如果有麻烦，请告诉我，因为我没有对它进行测试。

    $(window).resize(function(){    
        if ($(window).width() <= 767) {  
             $(".dropdown").unbind("mouseenter mouseleave");
        }
        else {
            $(".dropdown").bind({
                 mouseenter: function() {
                    $(".dropdown-menu", this).stop(true, true).fadeIn("fast");
                    $(this).toggleClass("open");
                 },
                 mouseleave: function() {
                    $(".dropdown-menu", this).stop(true, true).fadeOut("fast");
                    $(this).toggleClass('open');
                 }
            });
        }
    });

Answer 2

最快最简单的方法是使用jQuery resize事件并检查当前窗口大小并决定是否需要绑定或取消绑定我们的事件。这是一个小提琴，显示了一种方法。请记住，有很多事情需要处理，例如检查大小是否已更改，正确解除绑定事件以及确保我们不会不断重新绑定同一事件。随意提出任何问题。

至于问题的直接标题。你并没有真正禁用事件但是取消绑定它们并解除绑定你使用：off('mouseenter mouseleave')。每个jquery文档：https://api.jquery.com/hover/

要取消绑定上面的示例，请使用：

1 $（“td”）。off（“mouseenter mouseleave”）;

小提琴：https://jsfiddle.net/f81tsgtn/4/

JS：

// Initialize
var $window = $(window);
var $dropdown = $(".dropdown");
var $dropdownMenu = $(".dropdown-menu", $dropdown);
var currentSize = $window.width();
var currentEvent = '';

// Attach current event on load
(currentSize >= 767) ? bindOne('hover') : bindOne('click');

// Atach window resize event
$window.resize(function() {
    // get windows new size
    var newSize = $window.width();

    // Exit if size is same
    if (currentSize == newSize) {
        return;
    }

    // Check if its greater/smaller and which current event is attached so we dont attach multiple events
    if (newSize >= 767 && currentEvent != 'hover') {
        bindOne('hover');
    } else if (newSize < 767 && currentEvent != 'click') {
        bindOne('click');
    }

    // Update new size
    currentSize = newSize;
});

// Handles binding/unbinding of events
function bindOne (eventType) {
    if (eventType == 'hover') {
        // Update currentEvent
        currentEvent = eventType;

        // Make sure all previous events are removed and attach hover
        $dropdown.off('click').off('mouseenter mouseleave').hover(
            function() {
                $dropdownMenu.stop(true, true).fadeIn("fast");
            },
            function() {
                $dropdownMenu.stop(true, true).fadeOut("fast");
            }
        );
    }
    else if (eventType == 'click') {
        // Update currentEvent
        currentEvent = eventType;

        // Make sure all previous events are removed and attach hover
        $dropdown.off('mouseenter mouseleave').off('click').on('click',
            function() {
                $dropdownMenu.stop(true, true).fadeToggle("fast");
            }
        );
    }
}

HTML：

<div class="dropdown">
    hello
    <div class="dropdown-menu">
        hello again
    </div>
</div>

CSS：

.dropdown-menu {
    display: none;
}

如何在调整屏幕大小时禁用下拉列表jQuery悬停功能

2 个答案: