jquery弹出菜单效果代码_jquery菜单

jquery弹出菜单效果代码: 发布时间：2019-11-14编辑：脚本学堂

一例jquery弹出菜单的特效代码，在页面中弹出菜单，不错的小效果，感兴趣的朋友参考下。

1、jqueryMenu.js页面

复制代码代码示例:

//注册页面装载时执行的方法

$(document).ready(function(){

 //找到所有的主菜单

 //var uls=$("ul").children("a");

 var uls=$("ul > a");

 //给所有的主菜单注册点击事件

 uls.click(function(){

  //找到当前ul

  var urlNode=$(this);

  //找到当前li的兄弟节点

  //显示当前li的

  var lis=urlNode.nextAll("li");

  lis.toggle("show");

 });

});

2、jqueryMenu.html页面

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jquery弹出菜单 - www.plcxue.com</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/jqueryMenu.js"></script>
<style type="text/css">
li {
    list-style:none;
    margin-left:5px;
    margin-top:5px;
    display:none;
   }
</style>
</head>
<body>
    <ul>
     <a href="#">菜单一</a>
     <li>我是菜单1.1</li>
     <li>我是菜单1.2</li>
    </ul>
    <ul>
     <a href="#">菜单二</a>
     <li>我是菜单2.1</li>
     <li>我是菜单2.2</li>
    </ul>
</body>
</html>

您可能感兴趣的文章：

上一篇：jquery 翻牌效果导航菜单实现代码
下一篇：jquery联动下拉选择框(带效果图)

与 jquery弹出菜单效果代码有关的文章

本文标题：jquery弹出菜单效果代码
本页链接：http://www.jb200.com/article/29135.html

jquery弹出菜单效果代码