2 回答

TA貢獻1853條經驗 獲得超18個贊
簡單的事情在最大阻力線之后,與其說jQuery,不如用JS做這種簡單的事情。此外,JS 中的動畫很笨拙,尤其是在較弱的計算機和智能手機上,這會破壞用戶體驗。使用簡單的 JS 和 CSS 更容易做到??赡芪业拇a不會幫助你,但我希望能引導你走上正確的道路。附言。盡量不要在類和屬性和 id 中使用:“_”(下劃線),因為這是在 SEO 方面,它是對膝蓋的打擊,更好的選擇是:“-”(破折號)。
var menu = document.querySelector("#menu");
var button = document.querySelector("#button");
function toggleMenu(){
if(!menu.classList.contains("fade")){
menu.classList.add("fade");
}else{
menu.classList.remove("fade");
}
}
button.addEventListener("click", toggleMenu);
body{
margin: 0;
display: flex;
}
#menu{
background: pink;
width: 70px;
height: 100%;
text-align: center;
transition: 0.34s;
}
#button{
height: 30px;
transition: 0.34s;
}
.fade{
width: 0 !important;
}
.fade *{
display: none;
}
<aside id="menu" class="fade">
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
<div><a href="#">test</a></div>
</aside>
<button id="button">
Button
</button>
添加回答
舉報