JavaScript+CSS实现经典的树形导航栏

最新推荐文章于 2020-10-15 15:36:33 发布

这个角度有点胖

最新推荐文章于 2020-10-15 15:36:33 发布

阅读量984

点赞数 1

本文链接：https://blog.csdn.net/qq_43679366/article/details/86317256

版权

本文介绍如何利用JavaScript和CSS实现经典的树形导航栏。在管理系统中，这样的导航栏常见于右侧，点击父菜单会展示其子菜单。作者通过自学CSS和JS，完成了这一常见功能的实现，并分享了初始的HTML代码。

摘要由CSDN通过智能技术生成

在一些管理系统里面，一般右侧都会有树形的导航栏，点击一下就会出现下拉菜单，显示出来该父菜单下面的子菜单

项目，然后配以图片，和CSS的效果，可以说是非常常用的功能，现在做一个项目，正好用到这个功能，于是到处寻找

资料，从Struts的Dojo插件到Dojo的学习，各种看，结果各种不懂。那个悲催啊！！！结果从头再来，苦学CSS和JS，

虽然现在JS水平不咋的，但是还是可以写出一个一般的导航菜单栏了，自己看看还是说的过去，这里拿出来Show一

下，回来自己好用。

首先上最开始的左侧菜单HTML代码

<!DOCTYPE html><html>  <head>    <title>left.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">    <script type="text/javascript" src="/HTML/JavaScript/left.js"></script> <link rel="stylesheet" href="../css/left.css" type="text/css"></link></head>  <body>  <div class="show"><span class="fold1" onclick="changevisible(this)"><a href="#">基础信息管理</a></span>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/></span><span class="fold"><a href="/HTML/test/right.html" target="right" >主管单位信息</a></span></div>         <div class="hidden"><span class="2blank">   <img src="/HTML/img/sanjiao.gif"/></span><span class="fold"><a href="#">建设单位信息</a></span></div>         <