默认情况下,html – AdminLTE折叠框

AdminLTE基于Bootstrap： https://github.com/almasaeed2010/AdminLTE

但我不确定如何使可折叠的盒子默认折叠.

我假设它是建立在Bootstrap上,这应该是相当直截了当的.我已经尝试过其他实现,例如将id设置为“collapsedOne”,并尝试将div视为手风琴,但无济于事.

在AdminLTE / app.js〜line 45中,有一些代码实现向上/向下滑动以折叠框.理想情况下,我们想要的是,默认使用“collapsed-Box”类的“滑动”状态,使得当图标被点击时,它将执行“向下滑动”.

/*     
 * Add collapse and remove events to Boxes
 */
$("[data-widget='collapse']").click(function() {
    //Find the Box parent        
    var Box = $(this).parents(".Box").first();
    //Find the body and the footer
    var bf = Box.find(".Box-body,.Box-footer");
    if (!Box.hasClass("collapsed-Box")) {
        Box.addClass("collapsed-Box");
        bf.slideUp();
    } else {
        Box.removeClass("collapsed-Box");
        bf.slideDown();
    }
});

有什么建议么？

提前致谢.

解决方法

当页面加载到初始状态时,为什么不将折叠框类添加到框元素？

以下将在折叠状态和功能下呈现,而不会修改AdminLTE：


    <!-- Default Box -->
    <div class="Box Box-solid collapsed-Box">
        <div class="Box-header">
            <h3 class="Box-title">Default Solid Box</h3>
            <div class="Box-tools pull-right">
                <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
                <button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
        </div>
        <div style="display: none;" class="Box-body">
            Box class: <code>.Box.Box-solid</code>
            <p>bla bla</p>
        </div><!-- /.Box-body -->
    </div><!-- /.Box -->

默认情况下,html – AdminLTE折叠框

解决方法

猜你在找的HTML相关文章