jquery级联菜单效果

最新推荐文章于 2021-12-05 17:10:29 发布

lk231_java

最新推荐文章于 2021-12-05 17:10:29 发布

阅读量74

点赞数

分类专栏： jquery 文章标签： jQuery CSS HTML Web ViewUI

本文链接：https://blog.csdn.net/lk231_java/article/details/83888400

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery在前台客户端的处理有很大的优势，其类库小但功能实用，受到Web前端开发人员很大的青睐，下面是一个级联菜单和局部刷新的小例子
前端html代码如下


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>可收缩的级联菜单</title>
   <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/menu.js"></script>
    <link type="text/css" rel="stylesheet" href="css/menu.css"/>
</head>
<body>
      <ul>
          <a href="#">我是主菜单1</a>
          <li><a href="#" id="a.html">我是子菜单11</a></li>
          <li><a href="#" id="b.html">我是子菜单12</a></li>
      </ul>

      <ul>
          <a href="#">我是主菜单2</a>
          <li><a href="#">我是子菜单21</a></li>
          <li><a href="#">我是子菜单22</a></li>
      </ul>

      <div id="content"></div>
</body>
</html>

js代码如下


$(Document).ready(function(){
    var as = $("ul > a");
    as.click(function(){     //在文档加载之后为ul下的所有a节点注册鼠标点击事件
      var aNode = $(this);
      var lis = aNode.nextAll("li");
      lis.toggle("show");     //当a被点击其所有的兄弟节点li隐藏或显示
    });

    var as = $("li > a");    //得到所有li节点下的a节点元素
    as.click(function(){     //为每个a节点元素注册鼠标点击事件
        var aNode = $(this);
        $("#content").load(aNode.attr("id"));  //当鼠标点击时，为id为content的div加载文档
    });

});
css代码如下
li{
    list-style: none; /*取出小黑点*/
    margin-left: 10px;
    display: none;
    text-decoration: none;   /*去掉下划线*/
}

a {
    text-decoration: none;
}