JS实现的竖向折叠菜单代码

2019-11-20 11:26:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考，具体如下：

先来看看运行效果截图：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-hxzd-menu-demo/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>竖向的折叠菜单</title><script language = JavaScript>function showmenu(id) { var list = document.getElementById("list"+id); var menu = document.getElementById("menu"+id) if (list.style.display=="none") {  document.getElementById("list"+id).style.display="block";  menu.className = "title1"; }else {  document.getElementById("list"+id).style.display="none";  menu.className = "title"; }} </script><style type="text/css"><!--*{margin:0;padding:0;list-style:none;font-size:14px}#nav{margin:10px;text-align:center;line-height:25px;width:200px;}.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}--></style></head><body><div id="nav">    <div class="title" id="menu1" onclick="showmenu('1') ">Ajax下载</div>  <div id="list1" class="content" style="display:none">   <ul>    <li>jQuery</li>    <li>Extjs</li>    <li>Mootools</li>    </ul>  </div>   <div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>  <div id="list2" class="content" style="display:none">    <ul>    <li>菜单导航</li>    <li>层和布局</li>    <li>图片切换</li>    </ul>  </div> </div></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：Java中Timer的用法详解

下一篇：JS基于Mootools实现的个性菜单效果代码