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（）仅在窗口大于992px时触发，无论是在加载还是调整大小时，否则如果窗口是＆lt; 992px，无论是在加载还是在调整大小时我不想在悬停时触发此功能我想要点击时定期启动下拉列表。我尝试用css做这个但是我不能在下拉列表中添加动画，因为它只显示：none / block。我还尝试在resize上添加类来触发这个函数，如果元素有其他类别但它也不起作用。

编辑：最终工作版

$('.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获取窗口大小。我还没有测试你的代码。但我认为这样可以。

        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

初始解决方案

你的问题是双重的。首先，您需要它不以较小的尺寸显示菜单。为此，您检查调整窗口宽度的大小。问题是它只能工作一次。它会触发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')来实现。您可以在此处查看功能正常的演示：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

仅当窗口宽度大于其他窗口宽度时才执行功能

2 个答案:

初始解决方案

可能的替代解决方案