Question

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

实时预览： http://almsaeedstudio.com/preview/

但我不确定如何在默认情况下折叠折叠框。

我假设因为它是基于Bootstrap构建的，所以这应该是相当简单的。我已经尝试了其他实现，例如将id设置为“collapsedOne”并尝试将div视为手风琴，但无济于事。

在AdminLTE / app.js~第45行，有一些代码可以实现向上滑动/向下滑动以折叠框。理想情况下，我们想要的是默认情况下使用“折叠框”类使框处于“向上滑动”状态，以便在单击图标时执行“向下滑动”。

/*     
 * 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();
    }
});

有什么建议吗？

提前致谢。

Answer 1

当页面加载到初始状态时，为什么不将collapsed-box类添加到box元素？

以下将在折叠状态和功能中呈现而不修改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 -->

Answer 2

$("[data-widget='collapse']").click()将其添加到底部运行的JavaScript文件

Answer 3

以下是步骤：

将减号图标更改为加号。
将明确样式“display：none”添加到box-body
将“collapsed-box”类添加到框

Answer 4

对于使用 AdminLTE 2.1.1

的用户

只需在sidebar-collapse

上添加<BODY>课程即可

之前：

 <body class="skin-blue sidebar-mini">

后：

 <body class="skin-blue sidebar-mini sidebar-collapse">

Answer 5

$("[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 (!$(this).children().hasClass("fa-plus")) {.
        $(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
        bf.slideUp();
    } else {
        //Convert plus into minus
        $(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
        bf.slideDown();
    }
});

并在div部分中使用

Answer 6

一个打开的盒子： <div class="box">

折叠框： <div class="box collapsed-box">

然后当然更改按钮上的图标

Answer 7

默认情况下，在Admin LTE 3中，使用主卡上的类collapsed-card折叠。

<div class="col-md-3">
 <div class="card collapsed-card">
   <div class="card-header" >
     <h3 class="card-title">Expandable</h3>
     <div class="card-tools">
       <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
       </button>
     </div>
   </div>
   <div class="card-body" >
     The body of the card
   </div>
 </div>
</div>

您应该将图标更改为fas fa-plus，然后初始框以加号开头

Answer 8

只需添加＆＃34;折叠框＆＃34;到框中并改变这个：

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>

到

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>

这对我有用

Answer 9

对我有用的正确测试步骤是：

添加显式样式＆＃34; display：none＆＃34;到盒体

你完成了：）

        <div class="box ">
                    <div class="box-header with-border bg-yellow">
                      <h3 class="box-title">Box Title Here</h3>
                      <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div><!-- /.box-header -->
                    <div class="box-body" style="display: none;">
                      <div class="table-responsive">

                            <!--Your content here -->

                      </div><!-- /.table-responsive -->
                    </div><!-- /.box-body -->

        </div>

Answer 10

表示一个div

$(function() { $('your-button-id').click(); })

适用于所有

  $(function() { $("[data-widget='collapse']").click(); })

Answer 11

<div class="box box-default collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Expandable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

Answer 12

这个解决方案对我有用：

我为菜单添加了“collapse-left”类，并为主要内容添加了“strech”类。

我将版本1用于AdminLTE。对于左侧菜单，它在旁边的class =“left-side”中划分，而对于主要内容，则在class =“right-side”旁边。

所以，这是最终的代码：

<aside class="left-side collapse-left"> 
    <!-- put the left menu here --> 
</aside>
<aside class="right-side strech"> 
    <!-- put the main content here -->
</aside>

Answer 13

我将其添加到boxWidget对象：

setInitialCollapseStatus: function (container) {
        var _this = this;
        var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');

        collapsedBoxes.each(function (index) {
            var box = $(this);
            //Convert minus into plus
            box
                .removeClass(_this.icons.collapse)
                .addClass(_this.icons.open);

        });

    }

并在初始化期间调用它：

activate: function (_box) {
        var _this = this;
        if (!_box) {
            _box = document; // activate all boxes per default
        }
        //Listen for collapse event triggers
        $(_box).on('click', _this.selectors.collapse, function (e) {
            e.preventDefault();
            _this.collapse($(this));
        });

        //Listen for remove event triggers
        $(_box).on('click', _this.selectors.remove, function (e) {
            e.preventDefault();
            _this.remove($(this));
        });

        // Set initial collapseStatus
        _this.setInitialCollapseStatus($(_box));
    },

AdminLTE默认折叠框

13 个答案: