JQuery控制页面显示与隐藏

来源：互联网发布：倪妮牛仔裤知乎编辑：程序博客网时间：2024/05/28 16:07

如图所示，点击“北京总部..”红色标题栏的任意位置都可以让页面隐藏与显示
这里写图片描述
图一

图二
代码如下
JQuery代码

 <link href="../Content/AoJiUI/css/lxui.css" rel="stylesheet" />    <script src="../Content/AoJiUI/js/jquery-1.9.1.js"></script>    <script type="text/javascript">        $(function () {            //层的折叠与显示            $(".panel-heading").css("cursor", "pointer");            $(".panel-heading").click(function () {                var divIco = $(this).children("div");                var className = "glyphicon-image glyphicon-white glyphicon-img-minus divshowhide";                if (divIco.attr("class") == className) {                    className = className.replace('minus', 'plus');                    divIco.removeClass().addClass(className);                    $(this).first().siblings().hide();                } else {                    divIco.removeClass().addClass(className);                    $(this).first().siblings().show();                }            });        });    </script>

1.aspx页面代码

  <div class="row-fluid">            <div class="panel panel-danger">                <div class="panel-heading">                    <h3 class="panel-title floatleft">财务管理-留学管家在线缴费明细</h3>                    <div class="glyphicon-image glyphicon-white glyphicon-img-minus divshowhide"></div>                </div>                <div class="panel-body" id="divinfo">                    <div class="row">                        <div class="span2">                            <div class="input-group">                                <span class="input-group-addon ie_widthauto">学生姓名</span>                                <input type="text" id="txtResourceName" class="form-control ie_width50" runat="server" placeholder="学生姓名" />                            </div>                        </div>                        <div class="span3">                            <div class="input-group">                                <span class="input-group-addon ie_widthauto">缴费时间</span>                                <input class="form-control ie_widthauto" placeholder="起始时间" id="StartDate" type="text" runat="server" readonly="true" onfocus="WdatePicker({ el: 'StartDate' })" />                                <span class="input-group-addon ie_widthauto">-></span>                                <input class="form-control ie_widthauto" placeholder="结束时间" id="EndDate" type="text" runat="server" readonly="true" onfocus="WdatePicker({ el: 'EndDate' })" />                            </div>  .......

0 0