響應式移動菜單

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

這是為您工作的小提琴