当我切换菜单以关闭窗口并调整窗口大小时，如何防止徽标消失？

Question

我有一个可点击的徽标菜单。它们始终显示，但在较小的屏幕上除外，在较小的屏幕上需要使用汉堡菜单切换以显示它们。当菜单在较小的屏幕上时，菜单切换得很好，但是当您调整窗口大小时（如果菜单关闭），所有徽标都显示为“无”并且不会切换回来。我不确定我是否需要调整我的 css 或者我的 JS 是否关闭。document.getElementById('menu').addEventListener('click', myFunction);function myFunction() {  let logo = document.getElementsByClassName("team");  for (i = 0; i < logo.length; i++) {    if (logo[i].style.display === 'none') {      logo[i].style.display = 'inline';    } else {      logo[i].style.display = 'none';    }  }}.team {  width: 55px;  display: flex;}.menu-icon {  display: none;}@media screen and (max-width: 600px) {  .mobile-container {    margin: auto;    height: fit-content;  }  .menu-icon {    display: inline;    width: 100%;    background-color: red;  }  .team {    display: none;  }}<div class="wrapper">  <div class="container mobile-container">    <a href="#" class="menu-icon" id="menu">      <img src="https://via.placeholder.com/55">    </a>    <div class="sidebar">      <div class="column logos">        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>      </div>    </div>  </div></div>

Answer 1

问题是，当您单击菜单按钮时，您会为所有菜单项添加内联样式，因此当您隐藏它们时，所有菜单项都会添加内联样式，并且无论屏幕大小如何，它们都会保持原样display: none;。

您需要做的是仅在移动设备上更改菜单项的显示属性。您可以通过使用仅影响移动设备上的项目样式的类来实现此目的。请参阅下面的.hide-mobile类，以及仅打开和关闭该类的 JS 代码。

document.getElementById('menu').addEventListener('click', myFunction);

function myFunction() {

  let logo = document.getElementsByClassName("team");

  for (i = 0; i < logo.length; i++) {

    logo[i].classList.toggle('hide-mobile');

  }

}

.team {

  width: 55px;

  display: flex;

}

.menu-icon {

  display: none;

}

@media screen and (max-width: 600px) {

  .mobile-container {

    margin: auto;

    height: fit-content;

  }

  .menu-icon {

    display: inline;

    width: 100%;

    background-color: red;

  }

  .team {

    display: inline;

  }

  .team.hide-mobile {

    display: none;

  }

}

<div class="wrapper">

  <div class="container mobile-container">

    <a href="#" class="menu-icon" id="menu">

      <img src="https://via.placeholder.com/55">

    </a>

    <div class="sidebar">

      <div class="column logos">

        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>

        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>

        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>

        <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>

      </div>

    </div>

  </div>

</div>