首页 > 代码库 > HTML DOM部分---做竖向横向的下拉菜单
HTML DOM部分---做竖向横向的下拉菜单
1，竖向下拉菜单 鼠标单击打开 再打击关闭
<style>*{ margin:0px auto; padding:0px;}div{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}#biao{ cursor:pointer;}li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }</style></head><body><div id="biao" onclick="biao(1)">标题1</div><ul id="nei1" style=" display:none;"><li>内容1</li><li>内容2</li><li>内容3</li></ul><div id="biao" onclick="biao(2)">标题2</div><ul id="nei2" style=" display:none;"><li>内容1</li><li>内容2</li><li>内容3</li></ul><div id="biao" onclick="biao(3)">标题3</div><ul id="nei3" style=" display:none;"><li>内容1</li><li>内容2</li><li>内容3</li></ul></body></html><script>function biao(n){ if(document.getElementById("nei"+n).style.display=="none") { document.getElementById("nei"+n).style.display="block"; } else{ document.getElementById("nei"+n).style.display="none"; } }</script>
2.横向下拉菜单 鼠标放上显示 鼠标移开 关闭
<style>*{ margin:0px auto; padding:0px;}#aa{ width:100px; height:125px; float:left}#biao{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}#biao{ cursor:pointer;}#nei1{ display:none;}#nei2{ display:none;}#nei3{ display:none;}#nei4{ display:none;}#nei5{ display:none;}li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }</style></head><body><div id="aa"><div id="biao" onm ouseover="biao(1)" onm ouseout="biao1(1)">标题1</div><ul id="nei1"><li>内容1</li><li>内容2</li><li>内容3</li></ul></div><div id="aa"><div id="biao" onm ouseover="biao(2)" onm ouseout="biao1(2)">标题2</div><ul id="nei2"><li>内容1</li><li>内容2</li><li>内容3</li></ul></div><div id="aa"><div id="biao" onm ouseover="biao(3)" onm ouseout="biao1(3)">标题3</div><ul id="nei3"><li>内容1</li><li>内容2</li><li>内容3</li></ul></div><div id="aa"><div id="biao" onm ouseover="biao(4)" onm ouseout="biao1(4)">标题4</div><ul id="nei4"><li>内容1</li><li>内容2</li><li>内容3</li></ul></div><div id="aa"><div id="biao" onm ouseover="biao(5)" onm ouseout="biao1(5)">标题5</div><ul id="nei5"><li>内容1</li><li>内容2</li><li>内容3</li></ul></div></body></html><script>function biao(n){ document.getElementById("nei"+n).style.display="block"; }function biao1(n) { document.getElementById("nei"+n).style.display="none"; } </script>
HTML DOM部分---做竖向横向的下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。