源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js 单击式的下拉菜单效果实例

  • 时间:2022-01-29 01:44 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js 单击式的下拉菜单效果实例
[u]复制代码[/u] 代码如下:
<!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> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>js 单击式的下拉菜单效果</title> <style> .div1 { width: 120px; height: 20px; line-height:20px; text-align:center; } .div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; } .div2 a{ display:block;} </style> </head> <body> <script language="JavaScript"> var zindex=100 function dropit2(whichone){ if (window.themenu&&themenu.id!=whichone.id) themenu.style.visibility="hidden" themenu=whichone if (document.all){ themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (themenu.style.visibility=="hidden"){ themenu.style.visibility="visible" themenu.style.zIndex=zindex++} else{ hidemenu()}}} function dropit(e,whichone){ if (window.themenu&&themenu.id!=eval(whichone).id) themenu.visibility="hide" themenu=eval(whichone) if (themenu.visibility=="hide") themenu.visibility="show" else themenu.visibility="hide" themenu.zIndex++ themenu.left=e.pageX-e.layerX themenu.top=e.pageY-e.layerY+19 return false} function hidemenu(whichone){ if (window.themenu) themenu.style.visibility="hidden"} function hidemenu2(){ themenu.visibility="hide"} if (document.all) document.onclick=hidemenu </script> <span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span> <div class="div2" id="dropmenu"> <a href="http://www.1sucai.cn">编程素材网</a> <a href="#">个性名字网</a> <a href="#">个性名字网</a> </div> </body> </html> </td>    </tr>  </table>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部