jQuery は、2 レベルのドロップダウンメニュー効果 code_jquery を実装するだけです。-jsチュートリアル-php.cn

jQuery は、2 レベルのドロップダウンメニュー効果 code_jquery を実装するだけです。

WBOY

リリース： 2016-05-16 15:39:16

オリジナル

1198 人が閲覧しました

この記事の例では、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 プログラミングに役立つことを願っています。