本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来。。。。

<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的更多相关文章

  1. js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  2. js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

    预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...

  3. jQuery将物体居中,并且转换显示和隐藏

    今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可 ...

  4. td默认文字超出后显示..,点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  5. 5.用JQuery实现选中select里面的option显示对应的div

    用JQuery实现选中select里面的option显示对应的div HTML: <select name=""  onchange="select(this)&q ...

  6. jQuery控制checkbox选中状态但是不显示选中

    问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseA ...

  7. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  8. jquery easyUI 日期格式化,DateBox只显示年

    jquery easyUI 日期格式化,DateBox只显示年 >>>>>>>>>>>>>>>>> ...

  9. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  10. 页面通过Jquery取值然后传值到后台显示underfined是怎么回事?

    页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...

随机推荐

  1. [异常解决] How make ubuntu use Google Search

    1.Download the hosts file fromhttps://laod.cn/hosts/2016-google-hosts.html [1] 2.Write a bash shell ...

  2. Pjax调用

    $.pjax({container:'#content_center',url:href,data:data}); $(document).on('pjax:send', function() {// ...

  3. 学习ASP.NET MVC(六)——我的第一个ASP.NET MVC 编辑页面

    在上一文章中由Entity Framework(实体框架)去实现了对数据库的CURD操作.在本篇文章中,主要是调试修改自动生成的动作方法和视图,以及调试编辑功能与编辑功能的Book控制器. 首先,在V ...

  4. Canvas识别相似图片

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. C++静态存储,动态存储

    什么是静态存储,动态存储静态存储变量通常是在变量定义时就分定存储单元并一直保持不变, 直至整个程序结束. 动态存储变量是在程序执行过程中,使用它时才分配存储单元, 使用完毕立即释放.典型的例子是函数的 ...

  6. IOS之表视图添加索引

    我们要实现的效果如下. 1.修改ControlView.h,即添加变量dict,用于存储TabelView的数据源. #import <UIKit/UIKit.h> @interface  ...

  7. django中form表单的提交:

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  8. 在Windows上使用Ubuntu共享的打印机

    Ubuntu下使用cups共享打印机, 是一种简单易用的方法.CUPS(Common UNIX Printing System,通用Unix打印系统)是Fedora Core3中支持的打印系统,它主要 ...

  9. jq dom操作

    下面介绍我在网络上找的JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent() ...

  10. java发送短信验证码

    业务: 手机端点击发送验证码,请求发送到java服务器端,由java调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. SDK下载 ...