Ajax实现树形导航（Jquery）

最新推荐文章于 2025-09-05 14:01:23 发布

原创最新推荐文章于 2025-09-05 14:01:23 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #stylesheet #function #html #css

Ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用JQuery实现树形导航菜单的方法。通过给主菜单注册点击事件，实现子菜单的显示与隐藏功能。文章提供了完整的代码示例，包括JQuery脚本、CSS样式及HTML结构。

Ajax的应用有许多，本例简单介绍利用Jquery实现树形导航

jquerymenu.js的代码如下：
// 需要点击主菜单的时候，点击子菜单可以显示，再次点击可以隐藏
// 编辑代码，在页面装载时，给所有的主菜单添加onclick ( )事件，保证点击主菜单时可以显示和隐藏子菜单
// 注册页面加载时执行的方法
$(document).ready(function(){
//这里首先要找到所有的主菜单
//然后给所有的主菜单注册点击事件

var as = $("ul>a");
as.click(function(){
     // 这里首先找到ul的子节点li，然后让li显示出来

  //获取当前被点击的ul节点
  var aNode = $(this);
  //找到当前a节点中的所有兄弟li节点
  var lis = aNode.nextAll("li");
  //让li显示或隐藏
  lis.toggle("show");
});
});

menu.css代码如下：
@CHARSET "UTF-8";
/*如何让所有的小圆点都消失，使用css的标签选择器*/
li{
    /*让小圆点消失*/
list-style: none;
/*让子菜单缩进*/
margin-left: 18px;
/*先隐藏li子菜单*/
display: none;
}
a{
  text-decoration: none;
}

jquery-menu.html代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jquery实例2：树形导航</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.js"></script>
    <script type="text/javascript" src="js/jquerymenu.js"></script>


    <link rel="stylesheet" type="text/css" href="css/menu.css">

  </head>

  <body>
    <h1>Jquery实例2：树形导航</h1><hr>

    <ul>
       <a href="#">第一个菜单</a>
       <li><a href="#">这是子菜单1</a></li>
       <li><a href="#">这是子菜单2</a></li>
    </ul>

    <ul>
      <a href="#">第二个菜单</a>
      <li><a href="#">这是子菜单3</a></li>
      <li><a href="#">这是子菜单4</a></li>
    </ul>

  </body>
</html>

效果图如下：

说明：当鼠标点击“第一个菜单”时，会弹出子菜单“这是子菜单1”和“这是子菜单2”，当再次点击时则隐藏“这是子菜单1”和“这是子菜单2”，同时子菜单1和子菜单2又可以设置链接，同时也可以利用jquery技术，实现点击弹出窗口，或者出现部分介绍内容等等，有利于网页的布局，同时导航也显示出美观等特点（这里只考虑技术，未考虑美工）