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

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() 仅在加载和调整大小时 window 大于 992px 时触发，否则如果 window < 992px，加载或调整大小时我不想在悬停时触发此功能我希望在点击时常规 bootstrap 下拉菜单。我尝试使用 css 来做到这一点，但我无法在下拉菜单中添加动画，因为它只显示：none/block。我还尝试在调整大小时添加 class 以在元素具有 class 其他情况下触发此功能，但它也不起作用。

编辑：最终工作版本

$('.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

window.screen.availWidth 以获得 window 尺寸。我还没有测试你的 code.But 我想这会没问题。

        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();
            } 
        });

    })

Answer 2

初步解决方案

你的问题是双重的。首先，您需要它不显示较小尺寸的菜单。为此，您检查调整 window 宽度的大小。问题是它只能工作一次。它会触发 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 事件）时，如果屏幕太小，我们只是 return 退出该函数。

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') 来做到这一点，如第一个代码段所示。您可以在此处查看功能演示：http://jsfiddle.net/jmarikle/xw9Ljshu/

可能的替代解决方案

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

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

请注意，使用 !important 是因为 jQuery 在您 fadeIn 或 fadeOut.

时添加内联样式

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