打赏

asp.net html 单击按钮弹出下拉框效果

1、说明

需要引用jquery.js文件，我的页面是在asp.net MVC4 添加的web窗体，其他不多说 直接看代码

2、代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestXLCD.aspx.cs" Inherits="MvcAppTest.TestXLCD" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script src="Easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
         li {
            list-style-type:none;        
            height:32px;
            line-height:32px;
            vertical-align:middle;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            var oRegionAddXM = document.getElementById("divDK");
            var oDivListAddXM = document.getElementById("divAddXM");
            var colOptionsAddXM = document.getElementsByClassName("li2");
            var bNoAdjustedXM = true;
            oRegionAddXM.onclick = function () {
                oDivListAddXM.style.display = "block";
                //设置下列选择项的一些事件 
                for (var i = 0; i < colOptionsAddXM.length; i++) {
                    colOptionsAddXM[i].style.cursor = "hand";
                    colOptionsAddXM[i].onmouseover = function ()                //为列表项添加鼠标移动事件
                    {
                        this.style.backgroundColor = "#ffff00";
                        this.style.cursor = "pointer";
                    };
                    colOptionsAddXM[i].onmouseout = function ()
                        //为列表项添加鼠标移走事件
                    { this.style.backgroundColor = ""; };
                }

                if (bNoAdjustedXM) {
                    bNoAdjustedXM = false;
                    //设置下拉列表的宽度和位置
                    var X = $('#divDK').offset().top;
                    var Y = $('#divDK').offset().left;
                    var wide = this.offsetWidth + 60;
                    // oDivListAddXM.style.width = wide;
                    $('#divAddXM').width(wide);
                    $('#divAddXM').css({ 'left': Y, 'top': X + 32 });

                }
            }
            oDivListAddXM.onmouseleave = function () {
                oDivListAddXM.style.display = "none";
            };
        });
        function AddWG() {
            alert('菜单1');
        }
        function AddWJ() {
            alert('菜单2');
        }
        function AddPL() {
            alert('菜单3');
        }
        function AddGS() {
            alert('菜单4');
        }
        function AddGX() {
            alert('菜单5');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divDK" style="width:100px;height:31px;margin-top:15px;padding-top:7px;">
    <span style="cursor:pointer;">打开</span>
    </div>
          <div id="divAddXM" style="display:none;z-index:100;border:1px solid #0000aa;height:180px;overflow:hidden;position:absolute; background-color: #ccffff;"> 
         <table style="width:100%;border:none;border-collapse:collapse;">
             <tr>
                 <td>
                     <ul>
                         <li class="li2" onclick="AddWG()">菜单1</li>
                         <li class="li2" onclick="AddWJ()">菜单2</li>
                         <li class="li2" onclick="AddPL()">菜单3</li>
                         <li class="li2" onclick="AddGS()">菜单4</li>
                         <li class="li2" onclick="AddGX()">菜单5</li>
                     </ul>
                 </td>
             </tr>
         </table>
    </div>
    </form>
</body>
</html>

 

posted @ 2018-09-29 11:39  学习靠自己  阅读(640)  评论(0)  编辑  收藏  举报