<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery實作導航欄</title>
<script src="jquery-3.2.1.js"></script>
<style>
body{
display: flex;
justify-content: center;
}
div{
width: 400px;
height: 600px;
display: inline-block;
border: 4px solid #ccc;
border-radius: 10px;
float: left;
margin: 60px 40px;
}
div p{
margin: 40px auto;
text-align: center;
letter-spacing: 6px;
}
ul{
width: 140px;
background-color: antiquewhite;
margin: 0 20px;
padding: 0 0 0px 0;
list-style: none;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
border-right: 2px solid #ccc;
margin: 0 auto;
overflow: hidden;
}
ul span{
width: 100%;
display: inline-block;
background-color: #a0beb0;
padding: 0px 6px;
box-sizing: border-box;
cursor: pointer;
}
ul span b{
float: right;
}
ul li{
display: none;
cursor: pointer;
}
ul li:hover{
background-color: #bbdbcd;
}
.tab{display: none;}
.js_color{color: red !important;}
.ul1 li{display: block;}
</style>
<script>
$(function(){
// 手風琴菜單效果
$('#box2 span').click(function(){
var curLi=$(this).parent().find('li'); //獲得目前點選的菜單的二級菜單
var restUl=$(this).parent().siblings('ul'); //獲得沒有點選的一級菜單
// 通過判斷二級菜單是否收起，來進行判斷是否展開，并更換"+ -"表示
if(curLi.css('display') == 'none') {
curLi.slideDown();
curLi.parent().find('b').text('-');
}
else {
curLi.slideUp();
curLi.parent().find('b').text('+');
}
// 沒有點選的二級菜單全部收起，并将标志全部改為"+"
restUl.find('li').slideUp();
restUl.find('b').text('+');
});
// tab切換
$('#box2 ul li').click(function() {
//查找父級UL所在位置,看他是第幾個
var ul_num = $(this).parents('ul').index();
console.log(ul_num)
var li_num = 0;
if(ul_num>0){
//如果不是第一個,循環他前邊的所有UL
for (var i=0;i<ul_num-1;i++){
//查找UL一共有多少li
li_num += $('#box2 ul').eq(ul_num).find('li').length;
}
//查找目前LI所處的位置
li_num += $(this).index();
//查找第一個UL中所有LI的個數
li_num += $('#box2 ul').eq(0).find('li').length;
}else{
li_num += $(this).index();
}
//字型顔色變化
$('#box2 li').removeClass('js_color');
$(this).addClass('js_color');
//模拟點選左側标題 右側切換
$(".tab").hide().eq(li_num-1).show();
})
});
</script>
</head>
<body>
<div id="box2">
<ul class="ul1">
<span>懸疑推理 <b>+</b></span>
<li class="js_color">分類一</li>
<li>分類二</li>
</ul>
<ul>
<span>古裝武俠 <b>+</b></span>
<li>分類一</li>
<li>分類二</li>
</ul>
<ul>
<span>職場小說 <b>+</b></span>
<li>分類一</li>
<li>分類二</li>
</ul>
<ul>
<span>仙俠奇幻 <b>+</b></span>
<li>分類一</li>
<li>分類二</li>
</ul>
</div>
<div class="tab" style="display: block;">
1111
</div>
<div class="tab">
2222
</div>
<div class="tab">
3333
</div>
<div class="tab">
4444
</div>
<div class="tab">
5555
</div>
<div class="tab">
6666
</div>
<div class="tab">
7777
</div>
<div class="tab">
8888
</div>
</body>
</html>
![PPT制作學習記錄[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)