頁面運行結果：
點擊曹操 點擊劉備 點擊孫權 原圖
需求說明：原圖如上所示，點擊一方諸侯的時候，顯示該諸侯手下猛將，其他諸侯手下猛將隱藏
頁面結構：
實現思路：
①給大的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)；
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>導航欄項目切換</title> 6 7 <style type="text/css"> 8 *{ 9 padding: 0px; 10 margin: 0px; 11 } 12 13 #nav_box{ 14 width: 100px; 15 /* 高度不設置的時候盒子根據內容伸縮 */ 16 } 17 ul{ 18 list-style: none; 19 } 20 21 .nav_head li{ 22 background-color: gray; 23 color: white; 24 text-align: center; 25 font-size: 20px; 26 border: 1px solid black; 27 cursor: pointer; 28 } 29 .nav_head li ul li{ 30 border: 0.5px solid black; 31 font-size: 14px; 32 background-color: lightgray; 33 color: black; 34 border-collapse: separate; 35 display: none; 36 } 37 </style> 38 39 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 40 <script type="text/javascript"> 41 $(function(){ 42 //給盒子中的各個導航項注冊點擊事件 43 $(".nav_head>li").click(function(){ 44 $(".nav_head>li").children("ul").find("li").hide(300); 45 $(this).children("ul").find("li").show(300); 46 }); 47 48 }); 49 </script> 50 </head> 51 <body> 52 <div id="nav_box"> 53 <ul class="nav_head"> 54 <li>曹操 55 <ul> 56 <li>張遼</li> 57 <li>張郃</li> 58 <li>夏侯惇</li> 59 <li>夏侯淵</li> 60 <li>許褚</li> 61 <li>典韋</li> 62 <li>曹仁</li> 63 <li>曹洪</li> 64 <li>徐晃</li> 65 </ul> 66 </li> 67 68 <li>劉備 69 <ul> 70 <li>關羽</li> 71 <li>張飛</li> 72 <li>趙雲</li> 73 <li>馬超</li> 74 <li>黃忠</li> 75 <li>魏延</li> 76 </ul> 77 </li> 78 79 <li>孫權 80 <ul> 81 <li>甘寧</li> 82 <li>太史慈</li> 83 <li>程普</li> 84 <li>周瑜</li> 85 <li>韓當</li> 86 <li>周泰</li> 87 <li>蔣欽</li> 88 <li>祖茂</li> 89 <li>黃蓋</li> 90 </ul> 91 </li> 92 </ul> 93 </div> 94 </body> 95 </html>