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>

asp.net html 单击按钮弹出下拉框效果的更多相关文章

  1. easyui combobox点击输入框弹出下拉框

    由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...

  2. JQuery autocomplete获得焦点触发弹出下拉框

    需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),下面直接贴代码. js代码: $("#customerN ...

  3. ActionBar点击弹出下拉框操作

    首先: getActionBar().setDisplayShowTitleEnabled(false); ActionBar.LayoutParams lp = new ActionBar.Layo ...

  4. CSS实现鼠标移入弹出下拉框

    前言 最近比较沉迷CSS,所以我现在来做个鼠标的交互效果 HTML <ul> <li>测试</li> <li>测试</li> <li ...

  5. ExtJS003单击按钮弹出window

    html部分 <input type="button" id="btn" name="name" value="点击&quo ...

  6. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  7. Asp.Net下载页面,并弹出下载提示框

    Asp.Net下载页面,并弹出下载提示框.在删除按钮里调用以下方法.

  8. asp.net导出excel并弹出保存提示框

    asp.net导出excel并弹出保存提示框 2013-07-12 | 阅:1  转:78   |  分享  腾讯空间 人人网 开心网 新浪微博 腾讯微博 搜狐空间 推荐给朋友 举报          ...

  9. JQuery和ASP.NET分别实现级联下拉框效果

    在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...

随机推荐

  1. 【POJ1276】Cash Machine（多重背包单调队列优化）

    大神博客转载http://www.cppblog.com/MatoNo1/archive/2011/07/05/150231.aspx多重背包的单调队列初中就知道了但一直没(不会)写二进制优化初中就写 ...

  2. button 默认类型是submit

    “form表单里的按钮,明明是button而不是input type = submit,点击还是提交,如何让它不提交?” (这个问题被我遇到了,很坑爹的,知道了就不以为然了.) 因为 button 默 ...

  3. poj 1066 Treasure Hunt 线段相交

    题目链接 题目描述 一个正方形房间被分成若干个小室,宝藏在其中某一点.现可炸开任意一堵墙壁的中点位置.问至少要炸开多少堵墙才能从外面到达宝藏所在地. 思路 (很巧妙,没想到) 直接枚举墙壁与正方形外壁 ...

  4. hdu 4932 /bestcoder B题 #4 /思维题

    题意:给一个数列(整数),用一些不相交的区间去覆盖(只能是用端点去覆盖,端点可以交).而且区间出度相等.求最大区间长度. 开始一下就敲了,枚举每个区间长度,判断合法,更新最大.但是后来一看小数,感觉不 ...

  5. LeetCode OJ--Construct Binary Tree from Preorder and Inorder Traversal *

    http://oj.leetcode.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 根据二叉树的前序遍 ...

  6. Cryptography I 学习笔记 --- 绪论

    课程地址 1. 密码学可以用于保证消息传递的机密性(第三方不可能得到明文)与完整性(密文如果被第三方篡改,有手段可以检测到) 2. 数字签名(用私钥加密待签名文件的hash值) 3. 匿名通信(mix ...

  7. OS | Process

    linux多进程 1. fork()创建进程,创建一份父进程的拷贝:在父进程中返回的是子进程id,在子进程中返回的是0:失败时返回-1: 2. fork()经常和exec()结合,exec() 覆盖了 ...

  8. C# MD5加密(16进制)

    MD5加密(16进制) vs会提示引用 using System.Security.Cryptography; 代码如下: public static string MD5Encrypt32(stri ...

  9. error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools":解决方案

    我是在安装scrapy时遇到这个问题的,安装其他组件也可能会遇到.但问题解决办法都是大致相同的. 以安装scrapy为例: 在pycharm中安装twisted时出现: error: Microsof ...

  10. this.class.getClassLoader().getResourceAsStream

    this.getClass().getClassLoader().getResource("template");    首先,调用对象的getClass()方法是获得对象当前的类 ...