正文
jQuery----左侧导航栏面板切换实现
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
页面运行结果：
点击曹操 点击刘备 点击孙权 原图
需求说明：原图如上所示，点击一方诸侯的时候，显示该诸侯手下猛将，其他诸侯手下猛将隐藏
页面结构：
实现思路：
①给大的li注册鼠标点击事件
当鼠标点击时候，获取当前li的ul下的所有的li，调用元素的show（）方法。注意，该方法中可以加参数（数组），控制元素显示的快慢 $(this).children( "ul" ).find( "li" ).show(500);
获取当前li的所有的兄弟li：$(this).siblings( "li" )；
获取兄弟li下的ul：$(this).siblings( "li" ).children( "ul" )；
获取兄弟li下ul中的所有的li；$(this).siblings( "li" ).children( "ul" ).find( "li" )；
设置上述其他的li隐藏：$(this).siblings( "li" ).children( "ul" ).find( "li" ).hide(500)；
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏项目切换</title> <style type="text/css">
*{
padding: 0px;
margin: 0px;
} #nav_box{
width: 100px;
/* 高度不设置的时候盒子根据内容伸缩 */
}
ul{
list-style: none;
} .nav_head li{
background-color: gray;
color: white;
text-align: center;
font-size: 20px;
border: 1px solid black;
cursor: pointer;
}
.nav_head li ul li{
border: 0.5px solid black;
font-size: 14px;
background-color: lightgray;
color: black;
border-collapse: separate;
display: none;
}
</style> <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//给盒子中的各个导航项注册点击事件
$(".nav_head>li").click(function(){
$(".nav_head>li").children("ul").find("li").hide(300);
$(this).children("ul").find("li").show(300);
}); });
</script>
</head>
<body>
<div id="nav_box">
<ul class="nav_head">
<li>曹操
<ul>
<li>张辽</li>
<li>张郃</li>
<li>夏侯惇</li>
<li>夏侯渊</li>
<li>许褚</li>
<li>典韦</li>
<li>曹仁</li>
<li>曹洪</li>
<li>徐晃</li>
</ul>
</li> <li>刘备
<ul>
<li>关羽</li>
<li>张飞</li>
<li>赵云</li>
<li>马超</li>
<li>黄忠</li>
<li>魏延</li>
</ul>
</li> <li>孙权
<ul>
<li>甘宁</li>
<li>太史慈</li>
<li>程普</li>
<li>周瑜</li>
<li>韩当</li>
<li>周泰</li>
<li>蒋钦</li>
<li>祖茂</li>
<li>黄盖</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
