窗口调整菜单大小错误

Window resize menu bug

本文关键字：错误 菜单 调整 窗口      更新时间：2023-09-26

桌面视图
在移动设备上单击菜单项，然后调整为桌面时的桌面视图

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

这是玉石

    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代码放在"窗口调整大小"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（）

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

使用 jQuery 在调整窗口大小时显示或隐藏元素

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

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

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

2 Liner in Vanilla JS：

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