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

更新时间：2017年06月23日 09:59:00 作者：斯丢皮德曼

这篇文章主要为大家详细介绍了JavaScript实现简单的树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

<!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事件冒泡与事件捕获,结合实例形式分析了事件冒泡、阻止冒泡以及事件捕获的相关原理、操作技巧与注意事项,需要的朋友可以参考下
2018-08-08
解决Layui 表格自适应高度的问题
今天小编就为大家分享一篇解决Lyaui 表格自适应高度的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
javascript读取xml实现javascript分页
这篇文章主要介绍了javascript读取xml数据对其实现javascript分页效果，大家参考使用吧
2013-12-12
p5.js入门教程之键盘交互
这篇文章主要介绍了p5.js入门教程之键盘交互,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
本文主要介绍一些JS中用到的小技巧，可以在日常Coding中提升幸福度，将不定期更新
2018-07-07
JS实现将图片转为base64格式
Base64是一种用64个字符来表示任意二进制数据的方法，这篇文章主要为大家介绍了如何实现将图片转为base64格式，感兴趣的小伙伴可以学习一下
2023-07-07
js有序数组的连接问题
昨天碰到一道关于如何解决有序数组的连接问题，这是一个很常见的问题。但是这里要考虑到代码的效率问题，因为要连接的数组都是有序的，这是一个非常重要的前提条件
2013-10-10
bootstrap响应式工具使用详解
这篇文章主要介绍了bootstrap响应式工具使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
从盛大通行证上摘下来的身份证验证js代码
偶然发现盛大通行证上的身份证验证代码，特扒下来，方便大家的使用。
2011-01-01
使用TS来编写express服务器的方法步骤
这篇文章主要介绍了使用TS来编写express服务器的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10