Question

当页面加载如果窗口宽度> 991px fadeIn下拉形式默认情况下，延迟4秒后fadeOut ...问题：在这种情况下是否建议使用else语句，因为实际上如果if（$（window）。 width（）＆lt; 991）。不应加载.dropdown-menu ...

＆＃13;

$(document).ready(function () {
   if ($(window).width() > 991) {
      $(".book.dropdown .dropdown-menu").delay(4000).fadeIn(800).delay(4000).fadeOut(800);
     }
});

＆＃13;

其次，与页面加载无关，我想实现窗口宽度＆gt; 991px，.book.dropdown应该打开我创建的默认下拉菜单，但是什么时候是窗口宽度＆lt;点击991px应该打开JUST bootstrap模态窗口，但不能默认和模态一起。

我想提一下页面加载后的第一次，如果是窗口宽度＆gt; 991px，点击.book.dropdown，下拉菜单按预期打开，当我调整大小低于991px时，点击.book.dropdown，未按预期打开，因为打开模态和默认下拉菜单（仅为＆gt; 991px定义）），当你回到991px以上时，模态再次显示（问题再次出现）。

＆＃13;

$(window).on('resize', function() {
  var width = $(window).width(); //check window width
  if (width > 991) {
    $('.book.dropdown, .language.dropdown').on('click', function(e) {
      if (!$(e.target).is('.active_language') && !$(e.target).is('.booking.dropdown-toggle')) {
        return true;
      }

      var $el = $(this),
        $current = $('.navbar').data('popup'),
        visi = function() {
          $('.navbar').data('popup', $el.is(':visible') ? $el : null);
        };
      if ($current != null && !$current.is($el)) {
        $('.dropdown-menu', $current).fadeOut(600);
      }
      $('.dropdown-menu', $el).fadeToggle(600, visi);
    });
  } else {
    $(".book.dropdown").on('click', function(e) {
      $('#book-modal-fullscreen').modal('show');
    });
  };
});

＆＃13;

我也试过这段代码，但我没有做到

＆＃13;

$(window).on('load resize', function() {
      var width = $(window).width(); //check window width
  
      ...   
      
     }).resize();
});

＆＃13;

我也试过

＆＃13;

$(document).ready(function() {
      if ($(window).width() > 991) {
        $(".book.dropdown .dropdown-menu").delay(4000).fadeIn(800).delay(4000).fadeOut(800);
      }

      function checkWidth() {
          var width = $(window).width(); //check window width
          if (width < 991) {
            $(".book.dropdown").on('click', function() {
              $('.modal').modal('show');
            });
          } else {
            $('.modal.in').modal('hide');
          }
        }
        // Execute on load
      checkWidth();
      // Bind event listener
      $(window).resize(checkWidth);

＆＃13;

jQuery - on resize显示每个分辨率的bootstrap模态窗口，而不仅仅是特定的分辨率

0 个答案: