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. 写一简单kernel心得

    当人按下笔记本开机键时.cpu的cs寄存器(基址)跟ip(偏移量)寄存器加电.被强制初始化为(jmp xxx:xxx) 跳转到bios所在的地址. 接着bios开机自检(这个不需要了解,只需了解最后跳 ...

  2. 使用 IntelliJ IDEA 开发 Android 应用程序时配置 Allatori 进行代码混淆

    IntelliJ IDEA 提供了非常强大的 Android 开发支持,就连 Google 官方推荐的 Android Studio 其实也是 IntelliJ IDEA 的一个 Android 开发 ...

  3. Drupal service module 介绍

    https://www.ostraining.com/blog/drupal/services/ https://www.drupal.org/node/1246470 https://www.dru ...

  4. HOJ - 2543最小费用流

    题目链接:http://acm.hit.edu.cn/hoj/problem/view?id=2543 这个题目挺有意思. 自己扣了一会儿,发现图挺好建,就把(u,v,f,w) 拆成(u,v,f,0) ...

  5. Javascript 限制文本字节数

    文本限制字数的问题,在实际开发中经常用到;主要问题出现在对中文的限制,下面代码就解决关于限制字节数的校验问题 以下是引用片段: /* value: 值: byteLength:数据库字节长度 titl ...

  6. 51nod 1088 最长回文子串 【中心拓展法/输出长度和路径】

    1088 最长回文子串 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串. 输入一个字 ...

  7. 洛谷—— P1375 小猫

    https://www.luogu.org/problemnew/show/1375 题目描述 有2n只小猫站成一圈,主人小明想把它们两两之间用绳子绑住尾巴连在一起.同时小明是个完美主义者,不容许看到 ...

  8. 利用例子来理解spring的面向切面编程(使用@Aspect)

    上篇的例子,自动装配和自动检测Bean是使用注解的方式处理的,而面向切面编程是使用aop标签处理的,给我感觉就像中西医参合一样. 现在就来优化优化,全部使用注解的方式处理. 1.工程图:

  9. mybatis ----SqlSessionManager

    今天我们来看看这个类 有些写法还是很经典的 public class SqlSessionManager implements SqlSessionFactory, SqlSession { priv ...

  10. SpringMVC整合MongoDB

    首先,在pom文件中新增spring-data-mongodb的依赖: <dependency> <groupId>org.springframework.data</g ...