先上效果图：

主体内容就是侧边展示的一二三级菜单，树形结构的。

前端页面布局内容，页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级：

<body>

  <b><img src="data:images/fold.gif">树形菜单：</b>

  <ul><a href="javascript:onclick=show('art') "><img src="data:images/fclose.gif">文学艺术</a></ul>

  <ul id="art" class="no_circle" style="display: block;">

    <li><img src="data:images/doc.gif">先锋写作</li>

    <li> <img src="data:images/doc.gif">小说散文</li>

    <li><img src="data:images/doc.gif">诗风词韵</li>

  </ul>

  <ul><a href="javascript:onclick=show('photo') "><img src="data:images/fclose.gif">贴图专区</a></ul>

  <ul id="photo" class="no_circle" style="display: block;">

    <li><img src="data:images/doc.gif">真我风采</li>

    <li> <img src="data:images/doc.gif">视频贴图</li>

    <li><img src="data:images/doc.gif">行行摄摄</li>

    <li><img src="data:images/doc.gif">Flash贴图</li>

  </ul>

  <ul><a href="javascript:onclick=show('home') "><img src="data:images/fclose.gif">房产论坛</a></ul>

  <ul id="home" class="no_circle" style="display: block;">

    <li><img src="data:images/doc.gif">我要买房</li>

    <li> <img src="data:images/doc.gif">楼市话题</li>

    <li><img src="data:images/doc.gif">我要卖房</li>

    <li><img src="data:images/doc.gif">租房心语</li>

    <li><img src="data:images/doc.gif">二手市场</li>

  </ul>

  <ul><a href="javascript:onclick=show('game') "><img src="data:images/fclose.gif">娱乐八卦</a></ul>

  <ul id="game" class="no_circle" style="display: block;">

    <li><img src="data:images/doc.gif">红楼一梦</li>

    <li> <img src="data:images/doc.gif">笑话论坛</li>

    <li><img src="data:images/doc.gif">休闲生活</li>

    <li><img src="data:images/doc.gif">大话春秋</li>

  </ul>

</body>

CSS样式很简单，根据个人喜好设置：

 <style type="text/css">

	body{font-size:13px;

	line-height:20px;

	}

	a{font-size: 13px;

	color: #000000;

	text-decoration: none;

	}

	a:hover{font-size:13px;

	color: #ff0000;

	}

	img {

	vertical-align: middle;

	border:0;

	}

	.no_circle{list-style:none;

	display:none;

	}

</style>

JS内容我们用原生的JS很简单就写出来了，用show方法，获取到我们点击的块级元素的ID，给它添加display的样式，用if else语句来判断状态显示：

<script type="text/javascript">

  function show(d1){

    if(document.getElementById(d1).style.display=='block'){

	    document.getElementById(d1).style.display='none';  //触动的层如果处于显示状态，即隐藏

	  }

	  else{

	  document.getElementById(d1).style.display='block';  //触动的层如果处于隐藏状态，即显示

	}

  }

</script>

这样就完成树形菜单的编辑了。

用JS写一个网站树形菜单的更多相关文章

  1. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。

    问题: 写一个带文本菜单的程序,菜单项如下(1)    取五个数的和 (2)     取五个数的平均值(X)    退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  8. 记录下使用iis7代理node.js写的网站程序

    昨天晚上一个学弟的紧急求救,说了自己接的单子做了一个网站,使用了自己熟悉的技术——node.js+mongdb,但当看到部署环境惊呆了,是 windows+sqlserver.这些都不是关键,关键是服 ...

  9. 【Part1】用JS写一个Blog（node + vue + mongoDB）

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

随机推荐

  1. Python 基础之正则之二 匹配分组,正则相关函数及表达式修饰符

    四.匹配分组   [元字符] 分组符号 a|b   匹配字符a 或 字符b  (如果两个当中有重合部分,把更长的那个放前面) (ab)   匹配括号内的表达式 ,将()作为一个分组 num  引用分组 ...

  2. Java日期时间API系列9-----Jdk8中java.time包中的新的日期时间API类的Period和Duration的区别

    1.Period final修饰,线程安全,ISO-8601日历系统中基于日期的时间量,例如2年3个月4天. 主要属性:年数,月数,天数. /** * The number of years. */ ...

  3. unity优化-内存(网上整理)

    内存优化内存的开销无外乎以下三大部分:1.资源内存占用:2.引擎模块自身内存占用:3.托管堆内存占用.在一个较为复杂的大中型项目中,资源的内存占用往往占据了总体内存的70%以上.因此,资源使用是否恰当 ...

  4. win10+anaconda安装tensorflow和keras遇到的坑小结

    win10下利用anaconda安装tensorflow和keras的教程都大同小异(针对CPU版本,我的gpu是1050TI的MAX-Q,不知为啥一直没安装成功),下面简单说下步骤. 一 Anaco ...

  5. 【快学SpringBoot】SpringBoot+Docker构建、运行、部署应用

    前言 Docker技术发展为当前流行的微服务提供了更加便利的环境,使用SpringBoot+Docker部署和发布应用,其实也是一件比较简单的事情.当前,前提是得有Docker的基础. 源码在文末 文 ...

  6. SpringBoot中普通类无法通过@Autowired自动注入Service、dao等bean解决方法

    无法注入原因: 有的时候我们有一些类并不想注入Spring容器中,有Spring容器实例化,但是我们又想使用Spring容器中的一些对象,所以就只能借助工具类来获取了 工具类: package com ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：将所有列表项放置同一行

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  8. jvm学习：类的加载、连接、初始化、常量

    类在jvm中有这几个过程类的加载.连接.初始化.使用.卸载 类的加载 类的加载是将class文件中的二进制数据加载到内存中,将其放在运行时的数据区:方法区内,然后在内存中创建一个 java.lang. ...

  9. Integer a = 200,b=200比较详解

    题记:前几天面试Java基础给来了个面试题Integer a=200,b=200;System.out.println(a==b);当时回答是false,后来面试官又来了一个Integer a=100 ...

  10. 腾讯云服务器安装python3

    一,开始安装python3    首先安装相关包,这里千万不能忽视,不然有什么不可预见的错误会很难受.其命令如下: yum install zlib-devel bzip2-devel openssl ...