Question

我有一个函数，它将一个类应用于html元素，并检测是否在900px宽度以下点击了下拉列表。

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

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

此处正在为你工作fiddle

响应式移动菜单

1 个答案: