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 相关文章推荐
js实现可拖动DIV的方法
Dec 17 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
使用正则替换变量
2007/05/05 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
js使用递归解析xml
2014/12/12 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
django使用多个数据库的方法实例
2021/03/04 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
什么是Remote Module
2016/06/10 面试题
业务经理的岗位职责
2013/11/16 职场文书
购房意向书范本
2014/04/01 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
2022漫威和DC电影上映作品
2022/04/05 欧美动漫