js 實現下拉列表
阿新 • • 發佈:2019-01-07
一、HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="hw5"> <meta name="author" content="le"> <title>221600219_hw5</title> <link rel="stylesheet" type="text/css" href="./test.css" charset="utf-8"> <script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="./test.js" charset="utf-8"></script> </head> <body> <hr /> <h1>(2)下拉選單欄</h1> <div class="menu"> <ul> <li><a href="#">老子</a> <ul> <li><a href="#">生平事蹟</a> <ul> <li><a href="#">生平事蹟1</a></li> <li><a href="#">生平事蹟2</a></li> <li><a href="#">生平事蹟3</a></li> <li><a href="#">生平事蹟4</a></li> </ul> </li> <li><a href="#">名言語錄</a> <ul> <li><a href="#">名言語錄1</a></li> <li><a href="#">名言語錄2</a></li> <li><a href="#">名言語錄3</a></li> <li><a href="#">名言語錄4</a></li> </ul> </li> <li><a href="#">歷史成就</a> <ul> <li><a href="#">歷史成就1</a></li> <li><a href="#">歷史成就2</a></li> <li><a href="#">歷史成就3</a></li> <li><a href="#">歷史成就4</a></li> </ul> </li> </ul> </li> <li><a href="#">莊子</a> <ul> <li><a href="#">生平事蹟</a> <ul> <li><a href="#">生平事蹟1</a></li> <li><a href="#">生平事蹟2</a></li> <li><a href="#">生平事蹟3</a></li> <li><a href="#">生平事蹟4</a></li> </ul> </li> <li><a href="#">名言語錄</a> <ul> <li><a href="#">名言語錄1</a></li> <li><a href="#">名言語錄2</a></li> <li><a href="#">名言語錄3</a></li> <li><a href="#">名言語錄4</a></li> </ul> </li> <li><a href="#">歷史成就</a> <ul> <li><a href="#">歷史成就1</a></li> <li><a href="#">歷史成就2</a></li> <li><a href="#">歷史成就3</a></li> <li><a href="#">歷史成就4</a></li> </ul> </li> </ul> </li> <li><a href="#">孟子</a> <ul> <li><a href="#">生平事蹟</a> <ul> <li><a href="#">生平事蹟1</a></li> <li><a href="#">生平事蹟2</a></li> <li><a href="#">生平事蹟3</a></li> <li><a href="#">生平事蹟4</a></li> </ul> </li> <li><a href="#">名言語錄</a> <ul> <li><a href="#">名言語錄1</a></li> <li><a href="#">名言語錄2</a></li> <li><a href="#">名言語錄3</a></li> <li><a href="#">名言語錄4</a></li> </ul> </li> <li><a href="#">歷史成就</a> <ul> <li><a href="#">歷史成就1</a></li> <li><a href="#">歷史成就2</a></li> <li><a href="#">歷史成就3</a></li> <li><a href="#">歷史成就4</a></li> </ul> </li> </ul> </li> <li><a href="#">孔子</a> <ul> <li><a href="#">生平事蹟</a> <ul> <li><a href="#">生平事蹟1</a></li> <li><a href="#">生平事蹟2</a></li> <li><a href="#">生平事蹟3</a></li> <li><a href="#">生平事蹟4</a></li> </ul> </li> <li><a href="#">名言語錄</a> <ul> <li><a href="#">名言語錄1</a></li> <li><a href="#">名言語錄2</a></li> <li><a href="#">名言語錄3</a></li> <li><a href="#">名言語錄4</a></li> </ul> </li> <li><a href="#">歷史成就</a> <ul> <li><a href="#">歷史成就1</a></li> <li><a href="#">歷史成就2</a></li> <li><a href="#">歷史成就3</a></li> <li><a href="#">歷史成就4</a></li> </ul> </li> </ul> </li> </ul> </div> <hr /> </body> </html>
二、CSS
/* 下拉式選單欄: */ body{ width: 1000px; margin: 0 auto; padding: 100px 0; } .menu>ul{ display: flex; flex-direction: row; justify-content: center; } .menu ul{ list-style: none; padding:0; } .show-it1{ display: block; position: absolute; top:30px; left:0px; z-index: 200; } .show-it2{ display: block; position: absolute; top:30px; left:120px; z-index: 200; } .not-show-it{ position: relative; display: none; } .relative{ position: relative; } a{ display: block; background: #d9d9d9; width: 150px; font-size: 20px; line-height: 30px; border: 1px solid #b9b9b9; text-align: center; text-indent: 0; text-decoration: none; color: #404040; } a:hover{ color: #000000; background: #a9a9a9; }
三、js
$(document).ready(function(){ load2() }) function load2(){ //實現下拉選單 $(".menu>ul>li").addClass("relative") $(".menu>ul>li ul").addClass("not-show-it") $(".menu>ul>li").mouseenter(function(){ $(this).find("ul").toggleClass("show-it1 not-show-it") $(this).find("ul").find("li").find("ul").toggleClass("show-it1 not-show-it") }) $(".menu>ul>li").mouseleave(function(){ $(this).find("ul").toggleClass("show-it1 not-show-it") $(this).find("ul").find("li").find("ul").toggleClass("show-it1 not-show-it") }) $(".menu>ul>li>ul>li").mouseenter(function(){ $(this).find("ul").toggleClass("show-it2 not-show-it") $(this).find("ul").find("li").find("ul").toggleClass("show-it2 not-show-it") }) $(".menu>ul>li>ul>li").mouseleave(function(){ $(this).find("ul").toggleClass("show-it2 not-show-it") $(this).find("ul").find("li").find("ul").toggleClass("show-it2 not-show-it") }) }