响应式移动菜单

Question

我有一个函数，该函数将一个类应用于html元素，并且还检测是否单击了宽度小于900px的下拉菜单。

当我将浏览器的大小从桌面视图调整为900px以下时，偶尔会发现下拉类“ active-hit”没有得到应用-意味着菜单不会打开。 任何想法为什么会这样？ 我必须重新加载页面才能使其在移动视图中工作。

// Add Mobile View Class to HTML ELEMENT below 900px
(function($) {
var $window = $(window),
    $html = $('html');
    $dropdown = $('.dropdown-nav > a');

function resize() {
    if ($window.width() < 900) {

      $dropdown.on('click', function(e){
        $(this).parent().toggleClass('active-hit');
        e.preventDefault();
        e.stopPropagation();
      });

      return $html.addClass('mobile-view');

    } else {
      $html.removeClass('mobile-view');
      $dropdown.parent().removeClass('active-hit');
    }

}
$window
    .resize(resize)
    .trigger('resize');
})(jQuery);

Answer 1

正如我在评论中提到的，窗口调整大小不会触发您的功能，但是如果您出于测试目的而这样做，则可以尝试使用此功能：

$(window).resize(function() {
  resize();
});

这是为您工作的小提琴