我想要的是当我点击按钮时,COLLAPSE 菜单有不同的宽度,它的内容也会改变它的属性(在这种情况下改变字体大小),当我第一次按下按钮时, content 改变了它的大小,但是当我第二次按下它来 EXPAND 菜单时,内容不会恢复它的属性。我想用 JavaScript 中的 ANIMATE 属性来做,因为属性的变化不是很突然。
float
const btn = document.querySelector('#menu-btn');
const menu = document.querySelector('#sidebar');
$('#menu-btn').click(function() {
var width = $('#sidebar').width();
if (width == 100) {
$('#sidebar').animate({
width: "50"
});
menu.classList.toggle("menu-collapsed");
} else {
$('#sidebar').animate({
width: "100"
});
menu.classList.toggle("menu-expanded");
}
});
body,
html {
margin: 0;
padding: 0;
}
.content {
display: flex;
min-height: 100vh;
}
#sidebar {
width: 100px;
list-style-type: none;
padding: 0;
overflow: hidden;
white-space: nowrap;
background: white;
margin: 0;
}
.menu-expanded {
width: 100px;
}
li a {
font-size: 18px;
}
#menu-btn {
background: black;
color: white;
padding: 5px;
position: fixed;
top: 50px;
left: 50px;
}
.main {
border: 1px solid black;
flex: 1;
width: calc(100% - 100px);
}
.menu-collapsed {
width: 50px;
}
.menu-collapsed a {
font-size: 10px;
}