導航選單（動畫）--- jQuery

Aiqizai發表於2020-08-08
動畫jQuery

本文章實現是一個導航選單的功能

　　（1）點選當前選單顯示二級選單，再次點選收起當前選單。

　　（2）當有一個二級選單顯示，點選其他選單，上一個已點選選單會收起。只展示當前點選的選單，只顯示一個選單，類似手風琴的效果。

效果:

 

實現步驟：

1、html程式碼：

 

 1  <div class="menu">
 2         <div class="nav">
 3             <!-- 一級選單 -->
 4             <ul>
 5                 <li>
 6                     <div>一級選單A</div>
 7                     <!-- 二級選單 -->
 8                     <ol>
 9                         <li>二級選單</li>
10                         <li>二級選單</li>
11                         <li>二級選單</li>
12                     </ol>
13                 </li>
14             </ul>
15             <ul>
16                 <li>
17                     <div>一級選單B</div>
18                     <ol>
19                         <li>二級選單</li>
20                         <li>二級選單</li>
21                         <li>二級選單</li>
22                     </ol>
23                 </li>
24             </ul>
25             <ul>
26                 <li>
27                     <div>一級選單C</div>
28                     <ol>
29                         <li>二級選單</li>
30                         <li>二級選單</li>
31                         <li>二級選單</li>
32                     </ol>
33                 </li>
34             </ul>
35         </div>       
36     </div>

 

2、css程式碼：

 1  body{
 2             margin: 0;
 3         }
 4         ul, ol{
 5             padding: 0;
 6             margin: 0;
 7             list-style: none;
 8         }
 9         .menu{
10             width: 1200px;
11             margin-left: 200px;
12         }
13         .nav{
14             width: 1200px;
15         }
16         .nav ul{
17             width: 200px;
18         }
19         .nav ul > li{
20             width: 200px;
21         }
22         .nav ul > li div{
23             width: 200px;
24             height: 40px;
25             /* lh40px */
26             line-height: 40px;
27             /* bgc */
28             background-color: #800080;
29             color: #fff;
30             /* tac */
31             text-align: center;
32             cursor: pointer;
33         }
34         .nav ul > li > ol {
35             width: 180px;
36             margin: 0 auto;
37             background-color: #f0f0f0;
38             display: none;
39         }
40         .nav ul > li > ol li{
41             height: 40px;
42             line-height: 40px;
43             text-align: center;
44             border-bottom: 2px solid #1E90FF;
45         }
46         .nav ul > li > ol li:hover{
47             /* 滑鼠懸浮二級選單顯示的顏色 */
48             background-color: #9370DB;
49         }

3、指令碼部分：

　　//  要先引入jq檔案才書寫自己的jq程式碼
 1 <script src="../../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>  
 2 <script type="text/javascript">
 3     $(function(){
 4         // 給所有的一級選單新增點選事件
 5         $(".nav ul > li div").click(function(){
 6             // console.log(this);  this指向當前點選的div(一級選單)
 7             // 當前點選的一級選單下拉
 8             $(this).parent().find("ol").slideToggle(1000)
 9             // 收起選單  slideUp() 收起  
10             // jq的鏈式操作
11             $(this).parent().parent().siblings().find("ol").slideUp(1000);         
12             // 設定一級選單的背景顏色
13             $(".nav ul > li div").css("backgroundColor", "#800080");
14             // 當前點選的li高亮（當前點選的選單高亮）
15             $(this).css("backgroundColor","#1E90FF");        
16         })
17     })
18 </script>

文章到此結束。。。

 

相關文章