JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果相关的知识，希望对你有一定的参考价值。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #wai{width:200px; height:500px; margin-top:100px;} 7 8 .list{width:200px; height:20px; background-color:#999; text-align:center; line-height:20px; vertical-align:middle; color:#FFF; margin:2px;} 9 10 .erji{width:200px; height:40px;} 11 12 .xiala{width:200px; height:20px; background-color:white; text-align:center; line-height:20px; vertical-align:middle; color:black;} 13 </style> 14 </head> 15 16 <body> 17 <div id="wai"> 18 <div class="list" onclick="show(‘xinwen‘)" >点开</div> 19 <div class="erji" id="xinwen" style="display:none"> 20 <div class="xiala">新闻</div> 21 <div class="xiala">图片</div> 22 </div> 23 24 <div class="list" onclick="show(‘junshi‘)" >点开</div> 25 <div class="erji" id="junshi" style="display:none"> 26 <div class="xiala">军事</div> 27 <div class="xiala">科技</div> 28 </div> 29 30 <div class="list" onclick="show(‘meishi‘)" >点开</div> 31 <div class="erji" id="meishi" style="display:none"> 32 <div class="xiala">美食</div> 33 <div class="xiala">旅游</div> 34 </div> 35 36 <div class="list" onclick="show(‘jiating‘)" >点开</div> 37 <div class="erji" id="jiating" style="display:none"> 38 <div class="xiala">家庭</div> 39 <div class="xiala">宠物</div> 40 </div> 41 </div> 42 43 </body> 44 <script type="text/javascript"> 45 46 function show(id){ 47 var a=document.getElementById(id); 48 if(a.style.display=="none"){ 49 a.style.display ="block"; 50 }else{ 51 a.style.display ="none"; 52 } 53 } 54 55 </script> 56 </html>
以上是关于JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果的主要内容，如果未能解决你的问题，请参考以下文章
html怎么设计 左侧是菜单栏，点击不同的菜单选项在右侧出现相应的内容？