JavaScript實現(xiàn)簡單的樹形菜單效果

更新時間：2017年06月23日 09:59:00 作者：斯丟皮德曼

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的樹形菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

簡單的一個樹形菜單，具體內(nèi)容如下

<!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="">房產(chǎn)論壇</a>
</ul>
<ul id="fangc" style="display: none;>
  <li><img src=" images/doc.gif" alt="">房產(chǎn)推銷</li>
<li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li>
<li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li>
<li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li>
</ul>
<ul>
  <a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt="">提圖專區(qū)</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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: