JavaScript：调整笔记本电脑的浏览器窗口大小（“移动”-“桌面”-“移动”）不会重新启动菜单状态 [英] JavaScript: Resizing laptop's browser window ("mobile"--"desktop"--"mobile") doesn't reboot menu state

问题描述

我使用最新的Google Chrome浏览器，并且在WordPress网站中使用了以下响应式导航菜单的前端代码。

I use latest Google Chrome and I have the following frontend code for a responsive navigation menu which I use in my WordPress website.

点击 .burger 元素使相邻的 .menu 元素分别在下拉菜单或下拉菜单中显示或消失。

Clicking the .burger element makes adjacent .menu element to appear or disappear, in dropdown or dropup respectively.

1. 我们打开浏览器窗口< = 959px ，然后打开移动菜单。


2. 我们将窗口调整为> = 960px ，然后将其调整为< = 959px 。


3. 我们必须单击汉堡两次以关闭菜单，然后重新打开它。

1. We open a browser window <=959px and we open the mobile menu.
2. We resize the window to >=960px and then we resize back to <=959px.
3. We have to click the burger twice to close the menu, to then re-open it.

我的问题

为什么在给定的情况下，我们需要两次单击汉堡？

My question

Why do we need to click the burger twice in the given circumstances?

document.addEventListener('DOMContentLoaded', ()=>{
    let clicks = 0;
    let menu = document.querySelector('#menu-primary');
    let burger = document.querySelector('.burger');
    let isMenuVisible = false;

    burger.addEventListener('click', ()=>{
      isMenuVisible = !isMenuVisible;
      menu.style.display = isMenuVisible ? 'block' : 'none';
    });

    let mobileBehavior = ()=>{
      menu.style.display = 'none';
    };

    if (window.innerWidth <= 959) {
      mobileBehavior();
    }

    window.addEventListener('resize', ()=>{
      if (window.innerWidth <= 959) {
        clicks = 1;
      } else if (window.innerWidth >= 960) {
        menu.style.display = 'block';
      }
    });
});

.burger {
    display: block;
    text-align: center; color: var(--w);
    margin-bottom: 0 !important;
    font-weight: bold
}

#menu-primary { display: none }

@media screen and (min-width: 960px) {
    .burger { display: none }
    #menu-primary { display: block }
}

<div class="burger">BARS</div>

<ul id="menu-primary">
  <li>Homepage</li>
  <li>Contact_us</li>
</ul>

推荐答案

如果我理解这个问题，那么您正在尝试完成以下任务：

If I understand the question, you are trying to accomplish the following:

1. 创建一个汉堡包在 click 事件中打开和关闭的样式下拉菜单或导航抽屉。


2. 仅在移动屏幕上显示汉堡包和相关菜单


3. 如果在打开汉堡菜单时将移动尺寸的屏幕调整为桌面尺寸：a）汉堡和相关菜单均被隐藏，并且b）菜单显示为重置，这样，如果将屏幕调整为移动尺寸，则会显示汉堡包，但不会显示相关菜单。

1. Create a hamburger style drop down menu or navigation drawer that opens and closes on a click event.
2. Only show the hamburger and related menu on mobile screens.
3. If a mobile-sized screen is resized to a desktop size while the hamburger menu is open: a) the hamburger and related menu are both hidden, and b) the menu display is "reset" so that if the screen is resized back to a mobile size the hamburger is displayed but the related menu is not.

答案针对上述一项或多项，但并非全部。以下是将它们全部组合在一起的方法；但是，我建议您不要实施上面的 3b，除非您的应用或网站有不寻常的用例（我不认为大多数休闲用户会经常将屏幕的尺寸从移动设备调整为台式机，然后再回到移动设备尺寸，但是也许我是错的，而且我不知道如果有人进行了这种调整大小的实验，那么如果下拉菜单仍然可见，那也就没关系了。

The other answers have addressed one or more of the above items but not all of them. Following is an approach to putting them all together; however, I would recommend against implementing "3b" above unless you have an unusual use case for your app or site (I don't think most casual users are resizing their screens from mobile to desktop and then back to mobile sizes very often, but maybe I am wrong, and I don't know that it would matter much if the drop down menu was still visible if someone did go through this sort of resizing experiment).

我添加了一些其他的 html 和 css 用于样式设置，因为很难直观地看到切换样式的效果。菜单显示和使用spartan设置调整屏幕大小（还使用 visibility 属性和 position：absolute ，以便在切换显示时不会影响其他元素的位置。

I have added some additional html and css for styling purposes because it was hard to visually see the effects of toggling the menu display and resizing the screen with a spartan setup (also handled the display of the menu with the visibility attribute and position: absolute so that it doesn't impact the positioning of other elements when the display is toggled.

您特定目的的功能代码是javascript和CSS样式 .burger ， .burger菜单， .hidden 和 .desktop 类（包括相关的媒体查询）。

The functional code for your specific purpose are the javascript and the css styles for the .burger, .burger-menu, .hidden, and .desktop classes (including the related media query).

const burger = document.querySelector('.burger');
const burgerMenu = document.querySelector('.burger-menu');

burger.addEventListener('click', () => {
  burgerMenu.classList.toggle('hidden');
});

// not recommended (but this "resets" the menu display on resize)
window.addEventListener("resize", () => {
  if (window.matchMedia('(min-width:960px)').matches) {
    burgerMenu.classList.add('hidden');
  }
});

nav {
  background-color: #000;
  color: #fff;
  margin-bottom: 16px;
}

nav ul:first-child {
  display: inline;
  padding: 0;
}

nav ul li {
  padding: 8px 16px;
}

.burger {
  display: inline-block;
}

.burger div {
  background-color: #fff;
  margin: 4px 0;
  width: 24px;
  height: 3px;
}

.burger-menu {
  background-color: #000;
  padding: 4px;
  position: absolute;
  list-style: none;
}

.hidden {
  visibility: hidden;
}

.desktop {
  display: none;
}

@media screen and (min-width: 960px) {
  .burger {
    display: none;
  }
  .burger-menu {
    visibility: hidden;
  }
  .desktop {
    display: inline-block;
  }
}

<nav>
  <ul>
    <li class="burger">
      <div></div>
      <div></div>
      <div></div>
    </li>
    <ul class="burger-menu hidden">
      <li>Home (mobile)</li>
      <li>Contact (mobile)</li>
    </ul>
    <li class="desktop">Home (desktop)</li>
    <li class="desktop">Contact (desktop)</li>
  </ul>
</nav>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel augue ipsum. Donec suscipit nisi magna, ac condimentum est blandit a.
</div>

这篇关于JavaScript：调整笔记本电脑的浏览器窗口大小（“移动”-“桌面”-“移动”）不会重新启动菜单状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！