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

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() {&nbsp; let logo = document.getElementsByClassName("team");&nbsp; for (i = 0; i < logo.length; i++) {&nbsp; &nbsp; logo[i].classList.toggle('hide-mobile');&nbsp; }}.team {&nbsp; width: 55px;&nbsp; display: flex;}.menu-icon {&nbsp; display: none;}@media screen and (max-width: 600px) {&nbsp; .mobile-container {&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; height: fit-content;&nbsp; }&nbsp; .menu-icon {&nbsp; &nbsp; display: inline;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; background-color: red;&nbsp; }&nbsp; .team {&nbsp; &nbsp; display: inline;&nbsp; }&nbsp; .team.hide-mobile {&nbsp; &nbsp; display: none;&nbsp; }}<div class="wrapper">&nbsp; <div class="container mobile-container">&nbsp; &nbsp; <a href="#" class="menu-icon" id="menu">&nbsp; &nbsp; &nbsp; <img src="https://via.placeholder.com/55">&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="sidebar">&nbsp; &nbsp; &nbsp; <div class="column logos">&nbsp; &nbsp; &nbsp; &nbsp; <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href=""><img src="https://via.placeholder.com/55" alt="" class="team"></a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>