jQueryMenul.html(菜单案例)

最新推荐文章于 2020-01-14 23:34:38 发布

xiaoai

最新推荐文章于 2020-01-14 23:34:38 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： stylesheet function html div

本文链接：https://blog.youkuaiyun.com/Name_xiaoai/article/details/7724843

本文介绍了一个使用jQuery实现的下拉菜单案例。通过简单的HTML结构和jQuery的事件处理，实现了主菜单和子菜单的交互效果。点击主菜单时，子菜单将以动画形式展开或收起。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jQueryMenul.html(菜单案例)</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">

    
   <link rel="stylesheet" type="text/css" href="css/menu.css" />
   <script type="text/javascript" src="jslib/jquery.js"></script>
   <script type="text/javascript" src="jslib/jquerymenu.js"></script>
</head>

<body>
   <ul>
       <a href="#">我是主菜单1</a>
       <li><a href="#" id="JqueryWindow.html">我是子菜单1</a></li>
       <li><a href="#" id="JqueryWindow.html">我是子菜单2</a></li>
   </ul>
   <ul>
       <a href="#">我是主菜单2</a>
       <li><a href="#">我是子菜单3</a></li>
       <li><a href="#">我是子菜单4</a></li>
   </ul>
   <div id="content"></div>
</body>
</html>

--js代码

$(document).ready(
   function (){

    //找到所有的主菜单
    var as=$("ul > a");
    //给主菜单注册onclick事件
    as.click(
    function (){

   var asNode=$(this);
      var ass=asNode.nextAll("li");
   ass.toggle("slow");

    }
    );

$("li > a").click(
     function (){

      $("#content").load($(this).attr("id"));

     }

);

   }
);