ホームページ > 記事 > ウェブフロントエンド > jQuery は、2 レベルのドロップダウン メニュー効果 code_jquery を実装するだけです。
jQuery は、2 レベルのドロップダウン メニュー効果 code_jquery を実装するだけです。
- WBOYオリジナル
- 2016-05-16 15:39:161194ブラウズ
この記事の例では、2 レベルのドロップダウン メニュー効果コードの jQuery の単純な実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、IE6/IE7/IE8 で適切に動作する 2 レベルのドロップダウン メニューです。この例では、メニューには 4 つのグループのみが表示されますが、原理は同じです。メニューが長い場合は、直接コピーしてください。アプリケーションに合うまでは 1 セットだけで機能します。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
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 プログラミングに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。