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. 【CF1028A】Find Square(签到)

    题意:给定矩阵里,找到由B构成的矩形的中心 n,m<=115 思路: #include<cstdio> #include<cstring> #include<str ...

  2. 【CF725D】Contest Balloons(贪心,堆)

    题意:acm队伍可以得气球,相同气球数是一个排名.每个队伍有一个气球数上限,如果该队伍的气球数大于上限 该队伍被淘汰.给了你队伍的气球数,你的气球可以给别人,问你最大可能的排名. (2 ≤ n ≤ 3 ...

  3. Spring MVC学习一

    SpringMVC是一个基于DispatcherServlet的MVC框架,每一个请求最先访问的都是DispatcherServlet,DispatcherServlet负责转发每一个Request请 ...

  4. AC日记——[ZJOI2009]假期的宿舍 cogs 1333

    1333. [ZJOI2009] 假期的宿舍 ★★☆   输入文件:zjoi09holiday.in   输出文件:zjoi09holiday.out   简单对比时间限制:1 s   内存限制:25 ...

  5. 洛谷——P2149 [SDOI2009]Elaxia的路线

    P2149 [SDOI2009]Elaxia的路线 题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每 ...

  6. 洛谷——P3252 [JLOI2012]树

    P3252 [JLOI2012]树 题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度 ...

  7. IntelliJ IDEA ,springboot 2.0 +mybatis 创建和访问数据库

    环境: JDK8+windows10 步骤 New Module —>Spring Initializr—>next 1 ​ 2. ​ 3.web勾选web,sql里面可以不勾,后续添加, ...

  8. Excel导入的HDR=YES; IMEX=1详解

    参数HDR的值:HDR=Yes,这代表第一行是标题,不做为数据使用 ,如果用HDR=NO,则表示第一行不是标题,做为数据来使用.系统默认的是YES 参数Excel 8.0对于Excel 97以上版本都 ...

  9. pandas常见函数详细使用

    groupby函数 pandas提供了一个灵活高效的groupby功能,它使你能以一种自然的方式对数据集进行切片.切块.摘要等操作,根据一个或多个键(可以是函数.数组.Series或DataFrame ...

  10. 怎样使用Entityframework.Extended

    这个插件真的非常有用,我们能够使用下面语法来简化我们的工作,下面不过演示样例: Deleting <strong>//delete all users where FirstName ma ...