console
$().ready(function() {
$('.isCollapsible').on('click', function (e) {
e.preventDefault();
let expandAttr = $( this ).attr('aria-expanded');
let nearEl = $(this).next();
let newAttr;
if(expandAttr){
newAttr = !(expandAttr === 'true');
}
$( this ).attr('aria-expanded', newAttr);
if(newAttr){
nearEl.show();
$( this ).children('span').css('transform', 'rotate(0deg)');
}else{
nearEl.hide();
$( this ).children('span').css('transform', 'rotate(180deg)');
}
})
});
<!DOCTYPE html>
<html>
<head>
<title>collapsible menu</title>
</head>
<body>
<div class="collapsibleMenu">
<a aria-expanded="true" class="isCollapsible" href="#">可折叠菜单<span class="arrow"></span></a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div class="collapsibleMenu">
<a aria-expanded="true" class="isCollapsible" href="#">可折叠菜单<span class="arrow"></span></a>
<ul>
<li>todo item - 1</li>
<li>todo item - 2</li>
<li>todo item - 3</li>
<li>todo item - 4</li>
</ul>
</div>
</body>
</html>
.collapsibleMenu{
width: 400px;
color: #0072ac;
margin-bottom: 20px;
}
.isCollapsible{
display: block;
padding: 10px;
text-decoration: none;
color: #0072ac;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.isCollapsible span {
transition: transform .2s ease;
}
.isCollapsible ~ ul {
margin-top: 0;
list-style: none;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px 30px;
}
.isCollapsible ~ ul li {
margin-bottom: 10px;
}
.arrow{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #0072ac;
position: absolute;
right: 10px;
top: 14px;
}
ul{
background: #fff;
}