我有一个可以单击的徽标菜单。除了在较小的屏幕上,它们始终显示,需要在较小的屏幕上切换以使用汉堡菜单显示。菜单在较小的屏幕上时可以正常切换,但是在调整窗口大小时(如果菜单关闭),所有徽标均显示为“无”,并且不会切换回去。我不确定是否需要调整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>
问题是,当您单击菜单按钮时,您正在为所有菜单项添加内联样式,因此,在隐藏它们时,所有样式都具有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>
希望有所帮助。