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

Question

I have a menu of logos that will be clickable. They always display except on smaller screens, where they need to be toggled to show using a hamburger menu. The menu toggles fine when it is on a smaller screen, but when you resize the window (if the menu is closed), all of the logos display as "none" and won't toggle back. I'm not sure if I need to adjust my css or if my JS is off.

 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

The problem is that when you click on the menu button, you're adding inline styles for all the menu items, so when you hide them all of them have display: none; and they stay like that no matter the screen size.

What you need to do is to alter the display property of the menu items only on mobile. You can achieve this by using a class that affects the styles of the items on mobile only. See below the .hide-mobile class, and the JS code that just toggles that class on and off.

 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>

Hope that helps.