이 기사의 예에서는 2레벨 드롭다운 메뉴 효과 코드의 jQuery 간단한 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
2단계 드롭다운 메뉴인 jquery 플러그인 버전으로, IE6/IE7/IE8에서 잘 실행됩니다. 이 예에서는 메뉴에 4개의 그룹만 표시되지만 원칙은 동일합니다. 메뉴가 더 길면 직접 복사하세요. 귀하의 용도에 맞을 때까지 단 한 세트만 작동됩니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-simple-2l-slideout-menu-codes/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>两级下拉菜单</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style> *{ margin:0px; padding:0px; list-style:none; } body{ font-size:12px; } .nav{ float:left; clear:both; margin:100px; display:inline; } .nav li{ float:left; position:relative; } .nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; } .nav li a:hover { background:#666; color:#fff; } .nav li ul{ position:absolute; display:none; } .nav li ul li { float:none; } .nav li ul li a{ background:#eee; } </style> </head> <body> <ul id="mainNav" class="nav" > <li><a href="javascript:void(0);">首 页</a></li> <li><a href="javascript:void(0);">导航菜单</a> <ul> <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">采购</a></li> </ul> </li> <li><a href="javascript:void(0);" >企业采购</a> <ul> <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业评测</a></li> <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业报价</a></li> </ul> </li> <li><a href="javascript:void(0);">行情报价</a> <ul> <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航1</a></li> <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航2</a></li> <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航3</a></li> </ul> </li> </ul> <script language="JavaScript" type="text/javascript"> <!-- $(document).ready(function(){ var li = $("#mainNav > li"); //找到#mainNav中子元素li; var ul; li.each(function(i){ //循环每一个LI li.eq(i).hover( function(){ $(this).find("ul").show(); //找到li里面的ul元素设置为显示 }, function(){ $(this).find("ul").hide(); } ) }) }) //--> </script> </body> </html>
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.