我有一個可點擊的徽標菜單。它們始終顯示，但在較小的屏幕上除外，在較小的屏幕上需要使用漢堡菜單切換以顯示它們。當菜單在較小的屏幕上時，菜單切換得很好，但是當您調整窗口大小時（如果菜單關閉），所有徽標都顯示為“無”并且不會切換回來。我不確定我是否需要調整我的 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>
1 回答
蕭十郎
TA貢獻1815條經驗 獲得超13個贊
問題是，當您單擊菜單按鈕時，您會為所有菜單項添加內聯樣式，因此當您隱藏它們時，所有菜單項都會添加內聯樣式，并且無論屏幕大小如何，它們都會保持原樣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 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消