您的位置：首页 > Web前端 > JavaScript

JS实现点击某个图标展开关联菜单

2014-06-27 15:22 411 查看
JSP代码：

<body>
<div align="center">
<center>
<table id="itemopen" class="box" style="display: none">
<tr>
<td><a class="cc">Remove</a></td>
</tr>
<tr>
<td><a class="cc">Inactive</a></td>
</tr>
<tr>
<td><a class="cc">Copy as New</a></td>
</tr>
<tr>
<td><a class="cc">Properties</a></td>
</tr>
</table>
</center>
</div>
<span style="white-space:pre">	</span><img onCLick="popUp()" src="../base/images/index/config.png" style="float:right;padding-right:10px;cursor:hand;"/>
</body>


JS代码：

</pre><pre code_snippet_id="408372" snippet_file_name="blog_20140627_5_5161102" name="code" class="plain"><pre name="code" class="javascript">function popUp() {
newX = window.event.x + document.body.scrollLeft;//获取x轴位置
newY = window.event.y + document.body.scrollTop;//获取y轴位置
menu = document.all.itemopen;
if ( menu.style.display == "")
{
menu.style.display = "none" ;
}
else
{
menu.style.display = "";
}
menu.style.left = newX - 80;
menu.style.top = newY + 5; //向下挪5个像素，避免盖住半个操作按钮
}


CSS：


<pre name="code" class="javascript">.box {
position: absolute;
background: white;
border: 1px solid #CCC;
z-index:100;
}

itemopen.cc:hover {
cursor: hand;
color: #E4E8EE;
text-decoration: none;
}
</style>
</pre><pre>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航