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

原创
2013/07/28 23:36
阅读数 1.2W

      简单说下这个问题吧比如我们随意打开一个文件夹时,将鼠标放在工具栏文件按钮并点击时,下面会弹出一个下拉菜单 有新建、打开和保存等功能。这个功能看起来很简单,但是很多初学者去写代码时却发现,其实没那么简单,本以为只需要调用一个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

展开阅读全文
打赏
0
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
0
分享
返回顶部
顶部