Javascript

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

本文主要是介绍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实现简单的树形菜单效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!