(1)首先写两个js函数,获得页面中需要获得点的x,y坐标(如果是已经确定该点的位置,则可以不写):
function pageX(elem) {
return elem.offsetParent ? (elem.offsetLeft + PageX(elem.offsetParent)) : elem.offsetLeft;
}
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + PageY(elem.offsetParent)) : elem.offsetTop;
}
(2)提前写好要点击下拉按钮要显示的div
<div class="showSMenu" id="showSMenu_1">
<ul class="showSMenu_1_1">
<li><a href= "../admin/juanZeng/xinXiShenHe.aspx" target ="right">未审核信息</a></li>
<li><a href= "../admin/juanZeng/tongGuoList.aspx" target ="right">审核通过的信息</a></li>
<li><a href= "../admin/juanZeng/weiTongGuoList.aspx" target ="right">未通过的信息</a></li>
</ul>
</div>
(3)找好下来菜单的小图片,在图片上写好onClick事件(并且先设定其中一个不显示):
<img id="img1" alt="" src=\'#\'" /images/bullet_arrow_top.png" />
<img id="img2" style="display :none;" alt="" src=\'#\'" /images/bullet_arrow_bottom.png" />
(4) function move(num) { document.getElementById ("img1").style .display ="none"; document.getElementById ("img2").style.display="inline"; //alert("aaaaa"); var sm = document.getElementById ('showSMenu_' + num); sm.style.display = "block"; //下面一段是将div在根据传入的参数在特定位置显示,某些情况下可以不写 var a = document.getElementById ('a'); var x = pageX(a); var y = pageY(a); //sm.style.left = x + num * 300; sm.style.left = 100; sm.style.top = y; } function out(num) { document.getElementById ("img1").style .display ="inline"; document.getElementById ("img2").style.display="none"; var sm = document.getElementById ('showSMenu_' + num); sm.style.display = "none"; }