利用mouseover和mouseout这两个鼠标事件调用js做下拉菜单

最新推荐文章于 2023-02-05 23:58:52 发布

weixin_34055787

最新推荐文章于 2023-02-05 23:58:52 发布

阅读量717

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1162669/blog/147921

版权

2019独角兽企业重金招聘Python工程师标准>>>

简单说下这个问题吧比如我们随意打开一个文件夹时，将鼠标放在工具栏文件按钮并点击时，下面会弹出一个下拉菜单有新建、打开和保存等功能。这个功能看起来很简单，但是很多初学者去写代码时却发现，其实没那么简单，本以为只需要调用一个mouseover和mouseout鼠标事件在结合两个相应打开和关闭下拉表所在div的js代码代码就搞定了的事怎么做起来确感觉有点不对。很多人可能出现过以下问题：明明设定的是下拉列表所在块在鼠标其离开这个块时才消失的，怎么鼠标还在这个块上面只不过动了下鼠标，可是这个块确没了，其实这个原因很简答：因为这个mouseout 事件针对的对象仅仅是设定这个鼠标离开事件的块，只要离开了这个块，不过鼠标是在这个块内部的内嵌还是块元素上都算离开了。当然最开始鼠标在这个块内部的元素上是不会执行mouseout引用的这个命令的，从第二个就开始执行了，下边我将我的代码给大家分享一下，很简单我只不过是把当鼠标离开这个块时的js关闭方法放到了其父级li元素上调用，这个问题就解决了，废话我就不多说了。大家一看代码便知道了，代码看起来很长内容很简单，就是大致写了下样式占了不少行，只需要把代码全部复制过去运行一下就可以知道结果了。

<html> <head> <title>用mouseover事件和mouseout事件时间做下拉菜单</title> <style type="text/css"> #sumlist{ float: left; margin-top:100px; margin-left:200px; width: 160px; background-color: #f46317; list-style-type: none; } .ul{ float: left; margin-left: -40px; width: 200px; height:30px; line-height: 30px; text-indent: 20px; background-color: orange; } .ul:hover{ background-color: #f46317; } .li{ display: none; margin-top: -30px; width: 160px; margin-left: -40px; } .li li{ float: left; margin-left:200px; width: 200px; height:30px; background-color: #dbdbdb; list-style-type: none; } .li li:hover{ background-color: #f4a561; } </style> </head> <body> <ul id='sumlist'> <li onmouseover="openlist(0)" class="ul" onmouseout="closelist(0)"> <label>菜单</label> <ul class="li"> <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为</li> </ul> </li> <li onmouseover="openlist(1)" class="ul" onmouseout="closelist(1)"> <label>编辑</label> <ul class="li"> <li>复制</li> <li>删除</li> <li>剪切</li> <li>粘贴</li> <li>撤销</li> </ul> </li> <li onmouseover="openlist(2)" class="ul" onmouseout="closelist(2)"> <label>查看</label> <ul class="li" > <li>状态栏</li> <li>超大图标</li> <li>详细信息</li> <li>平铺</li> <li>刷新</li> </ul> </li> <li onmouseover="openlist(3)" class="ul" onmouseout="closelist(3)"> <label>帮助</label> <ul class="li" > <li>查看帮助</li> <li>关于***</li> <li>这***合法吗 </li> </ul> </li> <li onmouseover="openlist(4)" class="ul" onmouseout="closelist(4)"> <label>工具</label> <ul class="li" > <li>打开同步中心</li> <li>文件夹选项</li> </ul> </li> </ul> <script type="text/javascript"> //为了节省代码暂时把通过class获得对象弄成一个方法 function $(eve){ return document.getElementsByClassName(eve); } var t=null; //打开下拉菜单 function openlist(i){ var objdiv=$("li"); objdiv[i].style.display="block"; } //关闭下拉菜单 function closelist(i){ var objdiv=$("li"); objdiv[i].style.display="none"; }

</script> </body> </html

转载于:https://my.oschina.net/u/1162669/blog/147921