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

<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. td默认文字超出后显示..,点击tr时td文字显示完整

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

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

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

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

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

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

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

  5. ios UITapGestureRecognizer 单指单击、单指多击、多指单击、多指多击事件操作

    转自:http://blog.csdn.net/longzs/article/details/7457108 在ios开发中,需用到对于手指的不同操作,以手指点击为例:分为单指单击.单指多击.多指单击 ...

  6. jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果

    功能描述: text框中输入,text框下面的listbox中实时显示依据输入的内容进行模糊搜索的结果 js代码 $j(function() { $j("input[id='txtCos'] ...

  7. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  8. jquery总结06-动画事件01-基础显示和隐藏

    动画事件 .hide(option) 动画隐藏  会保存元素的原始属性值 $("#a2").hide({ duration: 3000, complete: function() ...

  9. IOS - UITableView分批显示数据 实现点击加载更多

    Phone屏幕尺寸是有限的,如果需要显示的数据很多,可以先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是数据源里先只放10条, 点击 ...

随机推荐

  1. LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    同时安装了VS2012和VS2010,用VS2010 时 >LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 问题说明:当安装VS2012之后 ...

  2. BestCoder Round #89 Fxx and string

    问题描述 青年理论计算机科学家Fxx得到了一个只包含小写字母的字符串. 字符串的长度为\:nn,下标从1开始,第\:i\:i位的字母为\:s_is​i​​,现在Fxx想知道有多少三元组\:(i,j,k ...

  3. 基于AgileEAS.NET SOA 平台SAAS架构技术的开源分销ERP系统-SmartERP.NET下载配置说明

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  4. spring mvc &lt;mvc:default-servlet-handler /&gt; 。

    spring mvc配置 <mvc:default-servlet-handler /> 时. 提示 The prefix "mvc" for element &quo ...

  5. windows编程:资源和播放声音

    要播放声音,要附加项:winmm.lib,然后包含头文件:#include <mmsystem.h> 播放声音用PlaySound函数,只能播放midi和wav波形文件. #define ...

  6. 【转】数据库无关的GO语言ORM - hood

    项目地址:https://github.com/eaigner/hood 这是一个极具美感的ORM库. 特性 链式的api 事务支持 迁移和名字空间生成 模型变量 模型时间 数据库方言接口 没有含糊的 ...

  7. iOS开发如何提高(from 唐巧的博客)

    http://blog.devtang.com/blog/2014/07/27/ios-levelup-tips/

  8. Odoo(OpenERP) 多个子类重载同一个父类方法的执行顺序及如何调用父类的父类方法

    首先说下起因,在修改英国会计模块(没错,就是那个安格鲁撒克逊记账模式!)中不符合中国国情的部分供能时,碰到了一个棘手的问题,简单的说就是B类继承它的父类A并重载了A的方法M,同时C类也继承了A类也重载 ...

  9. struts (二)

    1.运行流程 client --->tomcat  ---> webapp  -->web.xml --->filter -->struts.xml ---->na ...

  10. sublineText

    https://github.com/thinkpixellab/flatland { "color_scheme": "Packages/Theme - Flatlan ...