Question

desktop view
desktop view when menu item has been clicked on mobile and then resized to desktop

我在页面顶部有一个内联菜单，当在移动设备上时，它会转换为带有下拉菜单的“汉堡包”图标。

这是Jade

    i.fa.fa-bars.fa-2x.header__icon.js-nav-toggle

    nav.header__nav.js-nav(role="navigation")
        ul
            li.header__nav__item
                a.js-track(href="#about", data-item="about") About
            li.header__nav__item
                a.js-track(href="#features", data-item="features") Benefits
            li.header__nav__item
                a.js-track(href="#howitworks", data-item="howitworks") How it works
            li.header__nav__item
                a.js-track(href="#options", data-item="options") Lease options
            li.header__nav__item
                a.js-track(href="#savings", data-item="savings") Savings
            li.header__nav__item
                a.js-track(href="#enquire", data-item="enquire") Enquire
            li.header__nav__item.faq-menu
                a.js-track(href="/faq") FAQs

在css中，我正在使用媒体查询进行此转换，因此会出现图标。

+我有一些jquery使其工作（在移动视图上单击菜单图标时进行下拉切换，单击菜单项时切换回来，以及在桌面视图上单击菜单项时阻止切换的条件）。

所以，这是代码：

$(document).ready(function() {
$('.js-nav-toggle').on('click', function(e) {
    $('.js-nav').slideToggle(300);
    e.preventDefault();
});
if ($(window).width() < 768) {
$('.header__nav__item').on('click', function(e) {
    $('.js-nav').slideToggle(300);
    });
}

}）;

问题在于，只有在加载页面且未调整页面大小（笔记本电脑或移动设备）时才能完美运行。但是当您在宽窗口上加载页面然后将其调整为移动设备时，它变得很糟糕。在这种情况下，当我点击任何菜单项时，它不会切换回来（这很明显，因为我的jquery仅用于“文档就绪”。

反之亦然（当您从移动设备调整到笔记本电脑视图时）不正确的行为（如果您在移动设备上点击某些菜单，则整个ul消失（切换）为无效）。

我试图将相同的jquery代码放到“on window resize”jquery处理程序中，但它没有帮助。

$window.on('resize', function() {
if ($(window).width() < 768) {
    $('.header__nav__item').on('click', function(e) {
        $('.js-nav').slideToggle(300);
    });
}

}，150）;

我的假设是，至少当我从大屏幕调整为小屏幕时，它应该会有所帮助。但是... ...失败

还有一条评论：每个菜单项只是将页面向下滚动到某个部分（一页网站），因此页面不会重新加载。

任何想法和帮助表示赞赏。谢谢。

更新

添加了屏幕截图

感谢下面的答案，以下代码修复了桌面问题 - ＆gt;移动调整大小。

    $('.header__nav__item').on('click', function(e) {
  if ($(window).width() < 768) {
     $('.js-nav').slideToggle(300);
  }
});

试图修复手机 - ＆gt;具有以下代码的桌面

    $window.on('resize', function() {
    if ($(window).width() >= 768 && ($('.js-nav').is(':hidden'))) {
        $('.js-nav').html('Show all');
    }
}, 150);

无效，即使使用$（'。js-nav'）。show（）

但是，我发现了另一个类似的问题，并且会尽快以相同的方式重构代码（这将完全回答我的问题）

Display or hide elements on window resize using jQuery

Answer 1

我不确定我是否完全理解您的要求，但至少要处理您在此处说明的窗口调整大小问题是一种可能的解决方案。你不需要绑定一个事件处理程序来调整窗口上的事件大小，只需要在你的on click处理函数中放入检查当前窗口宽度的if语句：

$('.header__nav__item').on('click', function(e) {
  if ($(window).width() < 768) {
     $('.js-nav').slideToggle(300);
  }
});

这样，每次单击窗口宽度时都会动态检查。

Answer 2

香草 JS 中的 2 衬里：

navbar.addEventListener('click', function() {
    return (window.innerWidth <= 992) ? mob_navbar.classList.toggle('show') : null;
});

窗口调整大小菜单错误

2 个答案: