当我关闭菜单并调整 window 大小时，如何防止徽标消失？

Question

我有一个可点击的徽标菜单。它们始终显示，但在较小的屏幕上除外，在这些屏幕上需要切换它们以使用汉堡菜单显示。菜单在较小的屏幕上时可以很好地切换，但是当您调整 window 的大小时（如果菜单已关闭），所有徽标都显示为 "none" 并且不会切换回来。我不确定我是否需要调整我的 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;，并且无论如何它们都会保持这种状态屏幕尺寸。

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

希望对您有所帮助。

当我关闭菜单并调整 window 大小时，如何防止徽标消失？

How do I prevent my logos from disappearing when I toggle my menu to close and resize my window?

html

javascript

css

dom

responsive-design