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

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>

希望有帮助。