Window 调整菜单大小错误

Question

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

我在页面顶部有一个内联菜单，在移动设备上会转换为带有下拉菜单的 "hamburger" 图标。

这是翡翠

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

});

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

反之亦然（当您从移动设备调整到笔记本电脑视图时）不正确的行为（如果您在移动设备上单击某些菜单，整个 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);

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

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

感谢任何想法和帮助。谢谢你。

更新

添加了屏幕截图

感谢下面的回答，以下代码解决了桌面 --> 移动调整大小的问题。

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

尝试使用以下代码修复移动 --> 桌面

    $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

我不确定我是否完全理解您的要求，但至少处理您在此处陈述的 window 调整大小问题是一个可能的解决方案。您不需要绑定事件处理程序来调整 window 上的事件大小，只需将检查当前 window 宽度的 if 语句放在单击处理程序函数中：

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

这样每次点击window宽度都会动态检查。

Answer 2

2 Vanilla JS 内衬：

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

Window 调整菜单大小错误

Window resize menu bug

html

javascript

jquery

resize