• panel的展开,关闭的一种应用。


    js:

    <script type="text/javascript">
        $('#p2').panel({
            title: 'panel1',
            closable: false,
            collapsible: true,
            border: false,
            collapsed: true,
            //href: "url",
            onOpen: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            },
            onBeforeCollapse: function () {
                $($(this).panel('header')).removeClass('openPanelClass');
            },
            onBeforeExpand: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            }
    
        });
        $($('#p2')).panel('header').click(function () {
            $('#p2').panel('expand', true);
            $('#p2').panel('collapse', true);
        });
        $('#p3').panel({
            title: 'panel2',
            closable: false,
            collapsible: true,
            border: false,
            collapsed: true,
            //href: "url",
            onOpen: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            },
            onBeforeCollapse: function () {
                $($(this).panel('header')).removeClass('openPanelClass');
            },
            onBeforeExpand: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            }
        });
        $($('#p3')).panel('header').click(function () {
            $('#p3').panel('expand', true);
            $('#p3').panel('collapse', true);
        });
        $('#p4').panel({
            title: 'panel3',
            closable: false,
            collapsible: true,
            border: false,
            collapsed: true,
            //href: "url",
            onOpen: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            },
            onBeforeCollapse: function () {
                $($(this).panel('header')).removeClass('openPanelClass');
            },
            onBeforeExpand: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            }
        });
        $($('#p4')).panel('header').click(function () {
            $('#p4').panel('expand', true);
            $('#p4').panel('collapse', true);
        });
        $('#p5').panel({
            title: 'panel4',
            closable: false,
            collapsible: true,
            border: false,
            collapsed: true,
            //href: "url",
            onOpen: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            },
            onBeforeCollapse: function () {
                $($(this).panel('header')).removeClass('openPanelClass');
            },
            onBeforeExpand: function () {
                $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
            }
        });
        $($('#p5')).panel('header').click(function () {
            $('#p5').panel('expand', true);
            $('#p5').panel('collapse', true);
        });
    </script>

    html:

      

        <div style="margin: 5px">
            <div id="p2" style=" 985px;">
                1111111111
            </div>
        </div>
        <div style="margin: 5px">
            <div id="p3" style=" 985px;">
                2222222222
            </div>
        </div>
        <div style="margin: 5px">
            <div id="p4" style=" 985px;">
                3333333333
            </div>
        </div>
        <div style="margin: 5px">
            <div id="p5" style=" 985px;">
                44444444444
            </div>
        </div>
  • 相关阅读:
    【Java】:判断数据类型
    【Shell编程】:多命令处理
    正则表达式
    26、DIEN(DIN的延伸)
    25、深层用户兴趣网络DIN(阿里)
    强化学习(7)---动态规划
    强化学习(6)---马尔可夫过程
    ubuntu出现终端和浏览器输入法不能显示中文,但是ubuntu software可以显示(fcitx)
    ASP.NET实现企业微信接入应用实现身份认证
    DevOps
  • 原文地址:https://www.cnblogs.com/worf/p/5807867.html
Copyright © 2020-2023  润新知