侧边导航（高级搜索）应用到 $("xxxxx").click(function () {}点击某控件是触发的方法，

最新推荐文章于 2023-11-22 10:14:26 发布

xydyz

最新推荐文章于 2023-11-22 10:14:26 发布

阅读量714

点赞数

分类专栏：常用小功能

本文链接：https://blog.csdn.net/xydyz/article/details/49735779

版权

常用小功能专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前台代码：

<div id="advSearch">
<div class="advSearch_cont">
<a href="javascript:return false;" class="bar"></a>
<table style="width: 240px;">
<tr>
<td width="40%" class="t_r">
单位：
</td>
<td width="60%">
<asp:TextBox ID="txt_UNIT" Width="128" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="t_r">
单价：
</td>
<td>
<asp:TextBox ID="txt_minPRICE" Width="60" CssClass="validate[required,custom[onlyNumberWide]]"
runat="server"></asp:TextBox>-<asp:TextBox ID="txt_maxPRICE" Width="60" CssClass="validate[required,custom[onlyNumberWide]]"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="t_r">
所属费用类别：
</td>
<td>
<asp:TextBox ID="txt_CLASS_ID" Width="128" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<asp:Button ID="btn_advSearch" Text="高级搜索" runat="server" OnClick="btn_advSearch_Click" />
</td>
</tr>
</table>
</div>
</div>

样式：

/*高级搜索*/
#advSearch{position:absolute;top:70px;right:3px;border:1px solid #ccc; z-index:1000;}
#advSearch .advSearch_cont{padding:10px 0px;background-color:#B3DBF5;}
#advSearch table{border:0px;display:none;}
#advSearch table .t_r { text-align:right;}
#advSearch .bar{width:25px;height:105px;position:absolute;left:-25px;top:-1px;background:url(mini_bg.PNG) -25px 0px no-repeat;display:block;}

JS:

//高级搜索脚本
$(function () {
var expanded = true;
$("#advSearch .bar").click(function () {
if (expanded) {
$("#advSearch table").show();
$("#advSearch .bar").css('background-position', '-0px 0px');
} else {
$("#advSearch table").fadeOut(300); //fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
$("#advSearch .bar").css('background-position', '-25px 0px');
}
expanded = !expanded;
});
});