布局部分參考我的上一篇文章http://www.reibang.com/p/4324ef5bd676，
頁面圖
源碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.main_menu .main_menu_title {
background-color: #fff;
margin: 0;
padding: 0;
color: #337ab7;
background-color: #F8F8F8;
padding-left: 10px;
}
.main_menu {
background-color: #fff;
width: 200px;
height: 500px;
}
.main_menu ul li {
color: #337ab7;
padding-left: 10px;
}
.main_menu>ul>li:first-child {
color: #046177;
background-color: #F8F8F8;
}
.content{
transition: height 500ms;
overflow: hidden;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="main_menu">
<h3 class="main_menu_title">菜單列表</h3>
<ul>
<li>
<span class="change">菜單列表1</span>
<ul class="content show">
<li>第一個(gè)菜單</li>
<li>第二個(gè)菜單</li>
<li>第三個(gè)菜單</li>
<li>第四個(gè)菜單</li>
<li>第五個(gè)菜單</li>
</ul>
</li>
</ul>
<ul>
<li>
<span class="change">菜單列表2</span>
<ul class="content hide">
<li>第一個(gè)菜單</li>
<li>第二個(gè)菜單</li>
<li>第三個(gè)菜單</li>
</ul>
</li>
</ul>
<ul>
<li>
<span class="change">菜單列表3</span>
<ul class="content hide">
<li>第一個(gè)菜單</li>
<li>第二個(gè)菜單</li>
</ul>
</li>
</ul>
<ul>
<li>
<span class="change">菜單列表4</span>
<ul class="content hide">
<li>第一個(gè)菜單</li>
<li>第二個(gè)菜單</li>
<li>第三個(gè)菜單</li>
<li>第四個(gè)菜單</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
{
class Jean{
constructor(tabUl,content){
this.tabUl = document.getElementsByClassName(tabUl);
this.content = document.getElementsByClassName(content);
this.init();
}
init(){
Array.from(this.tabUl).forEach( (item,index) =>{
item.addEventListener('click',()=>{
this.hide();
this.show(index);
})
})
}
hide(){
Array.from(this.content).forEach(item=>{
item.classList.remove('show');
item.classList.add('hide');
})
}
show(index){
console.log(this.content[index])
if(this.content[index].display == 'block'){
this.content[index].classList.remove('show');
this.content[index].classList.add('hide');
}else{
this.content[index].classList.add('show');
this.content[index].classList.remove('hide');
}
}
}
new Jean('change','content');
}
/*$('.change').click(function() {
if($(this).next().css('display') == 'block') {
$(this).next().slideUp();
} else {
$('.change').next().slideUp();
$(this).next().slideDown();
}
});*/
</script>
</body>
</html>
