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

Question

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

$(function(){
    $(".dropdown").hover(function() {
        $(".dropdown-menu", this).stop(true, true).fadeIn("fast");
        $(this).toggleClass("open");         
    }, function() {
        $(".dropdown-menu", this).stop(true, true).fadeOut("fast");
        $(this).toggleClass('open');          
    });
});

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 调整大小事件并检查当前 window 大小并决定我们是否需要绑定或取消绑定我们的事件。这是一个 fiddle 展示了一种方法。请记住，有很多事情需要处理，例如检查大小是否发生变化、正确解除绑定事件以及确保我们不会不断地重新绑定同一事件。如有任何问题，请随时提出。

至于你问题的直接标题。您并没有真正禁用事件，而是解除绑定它们并解除绑定您使用的悬停：off('mouseenter mouseleave')。根据 jquery 文档：https://api.jquery.com/hover/

To unbind the above example use:

1 $( "td" ).off( "mouseenter mouseleave" );

Fiddle: 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 悬停功能

How disable dropdown jQuery hover function when resizing screen

jquery

navbar

jquery-hover