仅当窗口宽度大于其他值时才执行函数

Question

 function dropdownHover() {
   jQuery('ul.nav li.dropdown').hover(function() {
   jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
 }, function() {
   jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
 });
}


$(window).on('resize', function(event){
   var windowSize = $(window).width(); 
   if(windowSize > 992){
      dropdownHover();
   } 
});

我需要这个函数 dropdownHover() 仅在窗口大于 992 像素时触发，无论是加载还是调整大小，否则如果窗口

编辑：最终工作版本

$('.dropdown').on('mouseenter', function(){
  if(!$(this).is('.open') && $(window).data('wide'))
     $('.dropdown-menu', this).dropdown('toggle').hide()
        .stop(true, true)
        .delay(200)
        .fadeIn(function(){
            this.style.display = '';
        }).find('a').on('touchstart click', function (e) {
          e.stopPropagation(); 
      });
}).on('mouseleave', function(){
if($(this).is('.open') && $(window).data('wide'))
    $('.dropdown-menu', this).dropdown('toggle');
});

$('.dropdown').on('click', function(e){
  if( $(window).data('wide')) {
      $('.dropdown-menu', this).dropdown('toggle');
} else {
    $('.dropdown-menu', this)
        .stop(true, true).slideToggle()
        .closest('.dropdown').removeClass('open');
  }
});

// not entirely necessary.  Not sure which is faster: this or just checking the width in all three places.
$(window).on('resize', function(){
  $(window).data('wide', $(window).width() > 992);

// reset the open menues
$('.dropdown').removeClass('open');
$('.dropdown-menu').css({
    display: '',
    left: '',
    position: '',
 });

// because we are checking the width of the window, this should probably go here although this really should be a media query style
$('.dropdown-menu.pull-center').each(function() {
    var menuW = $(this).outerWidth();
    if ($(window).width() > 1000) {
        $(this).css({
            left: - menuW / 2 + 60 + 'px',
            position: 'absolute'
        });
    } else {
        $(this).css({
            left: '',
            position: ''
        });
    }
 });
 }).trigger('resize');

Answer 1

初步解决方案

你的问题是双重的。首先，您需要它不显示较小尺寸的菜单。为此，您检查调整窗口宽度的大小。问题是它只能工作一次。它会触发hover 的事件侦听器，并且如果屏幕在某个时候更大，它不会杀死这些事件侦听器。为此，您可以设置一个标志。有很多方法可以做到这一点，但对于我的回答，我选择使用 jQuery .data() 方法。

$(window).on('resize', function(event){
    var windowSizeWide = $(window).width() > 600; // reduced for testing purposes
    jQuery('ul.nav li.dropdown').data('dropdown-enabled', windowSizeWide);
}).trigger('resize');

然后当我们监听悬停事件（即mouseenter 和mouseleave 事件）时，如果屏幕太小，我们就简单地退出函数。

jQuery('ul.nav li.dropdown').on('mouseenter', function() {
    if(!jQuery(this).data('dropdown-enabled')) return;
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}).on('mouseleave', function() {
    if(!jQuery(this).data('dropdown-enabled')) return;
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}).find('.dropdown-menu').hide();

最后，您还希望事件在加载时触发。您可以通过简单地添加 .trigger('resize') 来做到这一点，如第一个 sn-p 所示。你可以在这里看到一个功能演示：http://jsfiddle.net/jmarikle/xw9Ljshu/

可能的替代解决方案

或者，您也可以使用 CSS 来处理媒体查询。最简单的方法是在较小的屏幕上强制display: none。我不建议完全隐藏该元素，因为此时它变得无法访问，但这是一般的想法：

@media(max-width: 600px) {
    ul.dropdown-menu {
        display:none !important;
    }
}

注意!important被使用是因为当你fadeIn或fadeOut时jQuery会添加内联样式。

第二次演示：http://jsfiddle.net/jmarikle/xw9Ljshu/1

Answer 2

window.screen.availWidth 获取窗口大小。我还没有测试你的代码。但我认为这没问题。

        function dropdownHover() {
        jQuery('ul.nav li.dropdown').hover(function() {
            jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        }, function() {
            jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        });
    }     

    $(document).ready(function(){
        $(window).on('resize', function(event){
            var windowSize = window.screen.availWidth; 
            if(windowSize > 992){
                dropdownHover();
            } 
        });

    })