JQuery控制页面显示与隐藏_jquery aria-labelledby-优快云博客

本文链接：https://blog.youkuaiyun.com/sunping177/article/details/52510934

本文介绍了一种使用JQuery实现的面板折叠与显示效果。通过简单的代码实现了点击标题栏进行内容区域的显示与隐藏功能，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

图二
代码如下
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>
  .......