JavaScript实现简单的树形菜单效果


Posted in Javascript onJune 23, 2017

简单的一个树形菜单,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>树形菜单</title>
  <style>
    body {
      font: 12px/20px 宋体;
    }

    img {
      vertical-align: center;
      border: none;
    }

    a {
      text-decoration: none;
      color: #000;
    }

    li {
      list-style: none;
    }
  </style>
  <script>
    function onclickfclose(id) {
      var ul = document.getElementById(id);
      var objv = ul.style.display;
      if (objv == 'none') {
        ul.style.display = 'block'
      } else {
        ul.style.display = 'none';
      }
    }


  </script>
</head>
<body>
<b><img src="images/fold.gif" alt="">树形菜单</b>
<ul>
  <a href="javascript:onclickfclose('art')"><img src="images/fclose.gif" alt="">文学艺术</a>
</ul>
<ul id="art" style="display: none;">
  <li><img src="images/doc.gif" alt="">著名小说</li>
  <li><img src="images/doc.gif" alt="">著名小说</li>
  <li><img src="images/doc.gif" alt="">著名小说</li>
  <li><img src="images/doc.gif" alt="">著名小说</li>
</ul>
<ul>
  <a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt="">房产论坛</a>
</ul>
<ul id="fangc" style="display: none;>
  <li><img src=" images/doc.gif" alt="">房产推销</li>
<li><img src="images/doc.gif" alt="">房产推销</li>
<li><img src="images/doc.gif" alt="">房产推销</li>
<li><img src="images/doc.gif" alt="">房产推销</li>
</ul>
<ul>
  <a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt="">提图专区</a>
</ul>
<ul id="tuhua" style="display: none;>
  <li><img src=" images
/doc.gif" alt="">风景图画</li>
<li><img src="images/doc.gif" alt="">风景图画</li>
<li><img src="images/doc.gif" alt="">风景图画</li>
<li><img src="images/doc.gif" alt="">风景图画</li>
</ul>
<ul>
  <a href="javascript:onclickfclose('bagua')"><img src="images/fclose.gif" alt="">娱乐八卦</a>
</ul>
<ul id="bagua" style="display: none;>
  <li><img src=" images
/doc.gif" alt="">明星采访</li>
<li><img src="images/doc.gif" alt="">明星采访</li>
<li><img src="images/doc.gif" alt="">明星采访</li>
<li><img src="images/doc.gif" alt="">明星采访</li>
</ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
js实现电灯开关效果
Jan 19 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 #Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
js实现城市级联菜单的2种方法
Jun 23 #Javascript
JS使用正则表达式验证身份证号码
Jun 23 #Javascript
创建简单的node服务器实例(分享)
Jun 23 #Javascript
详解微信小程序 template添加绑定事件
Jun 23 #Javascript
微信小程序 检查接口状态实例详解
Jun 23 #Javascript
You might like
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
详细分析python3的reduce函数
2017/12/05 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
行政经理的岗位职责
2013/11/23 职场文书
进口业务员岗位职责
2014/04/06 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
先进班集体申报材料
2014/12/26 职场文书
公司处罚决定书
2015/06/24 职场文书
员工给公司的建议书
2019/06/24 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL