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中的判断做得不好，所以才会导致想要实现的功能实现不了，现在终于好了，我可以去做其他的工作了！！^_^