jquery 点击按钮实现listbox的显示与隐藏,点击其他地方按钮外的地方,隐藏listbox
本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来。。。。
<asp:ImageButton ID="alltime" ImageUrl="images/SmallPage/dsj.png"
runat="server" style="width: 13px; height: 11px;" />
<!--这是个小三角图片,我要实现的功能是点击这个小三角,
一个listbox就能显示出来,再点击一下小三角或者点击页面的其他地方,这个
listbox就隐藏了,可恶的是,我点击不是这个小三角的地方,listbox还是会莫名其妙的显示出来,页面也刷新了,不知道是为嘛,难道是服务器控件的缘故,亟待解决!-->
$(function () {
$(document).bind("click", function (event) {
var e = event || window.event;
var elm = e.srcElement || e.target;//当前点击的元素,elm.id当前点击的元素的ID
if (elm.id != "alltime" && elm.id != "lastPublic") {
$("#<%=list1.ClientID%>").css("display", "none");
$("#<%=list2.ClientID%>").css("display", "none");
}
if (elm.id == "alltime") {
$("#<%=list1.ClientID%>").css("display", "block");
$("#<%=list2.ClientID%>").css("display", "none");
}
if (elm.id == "lastPublic") {
$("#<%=list1.ClientID%>").css("display", "none");
$("#<%=list2.ClientID%>").css("display", "block");
}
}
<asp:ImageButton ID="alltime" ImageUrl="images/SmallPage/dsj.png"
runat="server" style="width: 13px; height: 11px;"/>
<asp:ListBox runat="server" ID="list1" AutoPostBack="true" Width="80" style="z-index:999; position:relative;margin-left:-65px; display:none;">
<asp:ListItem>一天</asp:ListItem>
<asp:ListItem>两天</asp:ListItem>
<asp:ListItem>一周</asp:ListItem>
<asp:ListItem>一个月</asp:ListItem>
<asp:ListItem>三个月</asp:ListItem>
</asp:ListBox>
<asp:ImageButton ID="lastPublic" runat="server" ImageUrl="images/SmallPage/dsj.png" style="width: 13px; height: 11px;" />
<asp:ListBox runat="server" ID="list2" AutoPostBack="true" Width="80" style="z-index:999; position:relative;margin-left:-65px; display:none;" >
<asp:ListItem Selected="True">发帖时间</asp:ListItem>
<asp:ListItem>回复/查看</asp:ListItem>
<asp:ListItem>查看</asp:ListItem>
<asp:ListItem>最后发表</asp:ListItem>
<asp:ListItem>热门</asp:ListItem>
</asp:ListBox>
之前小三角是用服务器控件ImageButton去做,所以总会刷新,现在我把小三角改为
<div style="width: 13px; height: 11px; background: url('images/SmallPage/dsj.png');" id="alltime">
</div>
<div style="width: 13px; height: 11px; background: url('images/SmallPage/dsj.png');" id="lastPublic">
</div>
总算是不会刷新了,而且jquery的部分也改为
<script type="text/javascript" src="JS/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
// $("#alltime").click(function () {
// $("#<%=list1.ClientID%>").css("display", "block");
// });
// $("#lastPublic").click(function () {
// $("#<%=list2.ClientID%>").css("display", "block");
// });
$(document).click(function (event) {
var e = event || window.event;
var elm = e.srcElement || e.target;
// if (elm.id != "alltime" || elm.id!="lastPublic") {
// $("#<%=list1.ClientID%>").css("display", "none");
// $("#<%=list2.ClientID%>").css("display", "none");
// }
if (elm.id == "alltime") {//点击该元素的时候,判断它是否已经显示,若隐藏,则显示,若显示,则隐藏
if ($("#<%=list1.ClientID%>").css("display") == "none") {
$("#<%=list1.ClientID%>").css("display", "block");
$("#<%=list2.ClientID%>").css("display", "none");
} else {
$("#<%=list1.ClientID%>").css("display", "none");
$("#<%=list2.ClientID%>").css("display", "none");
}
}
if (elm.id == "lastPublic") {
if ($("#<%=list2.ClientID%>").css("display") == "none") {
$("#<%=list1.ClientID%>").css("display", "none");
$("#<%=list2.ClientID%>").css("display", "block");
} else {
$("#<%=list1.ClientID%>").css("display", "none");
$("#<%=list2.ClientID%>").css("display", "none");
}
}
if (elm.id != "lastPublic") {
$("#<%=list2.ClientID%>").css("display", "none");
}
if (elm.id != "alltime") {
$("#<%=list1.ClientID%>").css("display", "none");
}
});
});
</script>
不仅是按钮做得不好,也由于jquery中的判断做得不好,所以才会导致想要实现的功能实现不了,现在终于好了,我可以去做其他的工作了!!^_^
jquery 点击按钮实现listbox的显示与隐藏,点击其他地方按钮外的地方,隐藏listbox的更多相关文章
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- jquery实现点击显示,再点击隐藏
//点击a标签,轮流显示和隐藏<div id="timo" style="background-color:red;height:50px;width:50px;& ...
- js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div
预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...
- jQuery将物体居中,并且转换显示和隐藏
今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可 ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- 5.用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div HTML: <select name="" onchange="select(this)&q ...
- jQuery控制checkbox选中状态但是不显示选中
问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseA ...
- Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框
实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
随机推荐
- Delphi通过调用COM对象实现更改桌面壁纸
从前我也是用SystemParametersInfo这API来改桌面壁纸的,问题多多,也不知道哪错了,就没深究下去.看了CSDN的帖子后,大彻大悟~~ 在XP下,SystemParam ...
- leetcode_question_111 Minimum Depth of Binary Tree
Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...
- deal with 'non-admin area' warn
We usually use the follow code to delete product in Magento $product = Mage::getSingleton('catalog/p ...
- <select>标签后循环加入选项<option>——jquery
if (data.ReplaceDataFields != null) { $.each(data.ReplaceDataFields, function (i, item) { ...
- nginx源代码分析--配置文件解析
ngx-conf-parsing 对 Nginx 配置文件的一些认识: 配置指令具有作用域,分为全局作用域和使用 {} 创建其他作用域. 同一作用域的不同的配置指令没有先后顺序:同一作用域能否使用同样 ...
- poj 2686 Traveling by Stagecoach ---状态压缩DP
题意:给出一个简单带权无向图和起止点,以及若干张马车车票,每张车票可以雇到相应数量的马. 点 u, v 间有边时,从 u 到 v 或从 v 到 u 必须用且仅用一张车票,花费的时间为 w(u, v) ...
- B/S状态(同步)AJAX技术(异步)
同步(Synchronization).它是最常见的click-refresh状态,或提交一个表单,然后整个页面被刷新. 异步(Asynchrony).当前非常热的AJAX就是典型样例,提交请求返回对 ...
- JAVA 堆设置
JAVA 堆设置 第四节 堆已经讲得差不多啦,这章我们以一个例子来说说如何设置以及当发生堆溢出的时候怎么排查问题.先看一小段代码: 代码中使用了一个无限循环来为list添加对象,如果采 ...
- getDeclaredFields()和getFields()
getFields()获得某个类额的所有的公共(public)的字段,包括父类. getDeclaredFields()获得某个类的所有申明的字段,即包括public.private和proteced ...
- 开源一个监控数据采集Agent:OpenFalcon-SuitAgent
OpenFalcon-SuitAgent 项目地址:github 版本说明 本系统版本划分如下 alpha:内部测试版(不建议使用于生产环境) beta:公开测试版(不建议使用于生产环境) final ...