jQuery简单实现两级下拉菜单效果代码

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery简单实现两级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款两级下拉菜单,jquery插件版，在IE6/IE7/IE8下运行良好，在本示例中，菜单仅显示了四组，不过原理是一样的，菜单较长的话直接复制其中一组就行了，直到满足你的应用。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/23833

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案