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>

希望有帮助。

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

1 个答案: