zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    vue 前端处理监听关键字搜索
    小程序引入背景图片
    解决vue低版本安卓手机兼容性问题
    js和jq实现全选反选
    SVN使用教程
    CSS如何修改tr边框属性
    在小程序中使用md5
    jquery ajax在 IE8/IE9 中无效
    vue 选择图片(限定大小)上传到服务器
    当获取图片失败时候,显示默认图片
  • 原文地址:https://www.cnblogs.com/worf/p/5807867.html
Copyright © 2011-2022 走看看