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

更新时间：2020-05-19 11:06:01 作者：startmvc

简单的一个树形菜单，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UT

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


<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。