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 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
js中!和!!的区别与用法
May 09 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实现简单数字分页效果
2015/07/26 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
javascript中indexOf技术详解
2015/05/07 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Django后台admin的使用详解
2019/07/08 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
django ORM之values和annotate使用详解
2020/05/19 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
员工入职担保书范文
2014/04/01 职场文书
财务人员担保书
2014/05/13 职场文书
承诺书格式范文
2014/06/03 职场文书
英语专业自荐书
2014/06/13 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
合作协议书范文
2014/08/20 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
介绍一下28个JS常用数组方法
2022/05/06 Javascript