blocks|key|2734727|text|$("[data-widget='collapse']").click()将其添加到在底部运行的JavaScript文件中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2734728|entityMap^0|0|11|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>$("[data-widget='collapse']").click()</code> Add that to a JavaScript file that runs at the bottom</p>


blocks|key|2947394|text|以下是步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947395|2947396|将减号图标更改为加号。|ordered-list-item|2947397|将显式样式"display:none“添加到框主体|2947398|将类”|2947399|-box“添加到框|2947400|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

<p>Here are the steps:</p>

<ol>
<li>Change the minus icon to plus .</li>
<li>Add explicit style "display:none" to box-body  </li>
<li>Add the class "collapsed-box" to the box</li>
</ol>


blocks|key|152590|text|适用于使用AdminLTE+2.1.1的用户|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|152591|只需简单地在<BODY>上添加sidebar-collapse类|CODE|152592|之前：|152593|+<body+class="skin-blue+sidebar-mini">|code-block|syntax|javascript|152594|之后：|152595|+<body+class="skin-blue+sidebar-mini+sidebar-collapse">|152596|entityMap^0|5|E|0|6|6|F|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|H]|$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|13|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|14|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|15|8|@]|D|@]|E|$]]|$1|R|3|S|5|M|7|16|8|@]|D|@]|E|$N|O]]|$1|T|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|U|$]]

<p>For those who are using <strong>AdminLTE 2.1.1</strong></p>

<p>just simply add <code>sidebar-collapse</code> class on the <code>&lt;BODY&gt;</code></p>

<p><br>Before:</p>

<pre><code> &lt;body class="skin-blue sidebar-mini"&gt;
</code></pre>

<p><br>After:</p>

<pre><code> &lt;body class="skin-blue sidebar-mini sidebar-collapse"&gt;
</code></pre>


blocks|key|149904|text|打开的盒子：<div+class="box">|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|149905|一个折叠的盒子：<div+class="box+collapsed-box">|149906|当然，还可以更改按钮上的图标|149907|entityMap^0|6|H|0|8|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p>An open box:
<code>&lt;div class="box"&gt;</code></p>

<p>A collapsed box:
<code>&lt;div class="box collapsed-box"&gt;</code></p>

<p>And then ofcourse change the icon on the button</p>


blocks|key|152654|text|在Admin+LTE3中，默认情况下使用主卡上的类collapsed-card进行折叠。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|152655|像这样|152656|<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>|code-block|syntax|javascript|152657|您应该将图标更改为fas+fa-plus，然后初始框以加号开头。|152658|entityMap^0|P|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>In Admin LTE 3 collapse by default by using the class <code>collapsed-card</code> on the main card.</p>

<p>Like this</p>

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

<p>You should change the icon to a fas fa-plus then the initial box starts with a plus</p>


blocks|key|2947384|text|$("[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();
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2947385|和在div节中使用|unstyled|2947386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("[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();
    }
});
</code></pre>

<p>and use in section div
</p>


blocks|key|2947421|text|对于一个指定的div|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947422|$(function()+{+$('your-button-id').click();+})|code-block|syntax|javascript|2947423|为所有人|2947424|++$(function()+{+$("[data-widget='collapse']").click();+})|2947425|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>for one specify div</p>

<pre><code>$(function() { $('your-button-id').click(); })
</code></pre>

<p>for all </p>

<pre><code>  $(function() { $("[data-widget='collapse']").click(); })
</code></pre>


blocks|key|2947444|text|只需在框中添加“折叠框”并更改此设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947445|<button+class="btn+btn-box-tool"+data-widget="collapse"><i+class="fa+fa-minus"></i></button>|code-block|syntax|javascript|2947446|至|2947447|<button+class="btn+btn-box-tool"+data-widget="collapse"><i+class="fa+fa-plus"></i></button>|2947448|这对我来说应该没问题|2947449|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Simply add "collapsed-box" to the box and change this:</p>

<pre><code>&lt;button class="btn btn-box-tool" data-widget="collapse"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;&lt;/button&gt;
</code></pre>

<p>to </p>

<pre><code>&lt;button class="btn btn-box-tool" data-widget="collapse"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
</code></pre>

<p>This should work for me</p>


blocks|key|151181|text|对我有效的正确的测试步骤是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151182|151183|添加显式样式"display:none“to+box-body|ordered-list-item|151184|You+are+done+:)+<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>+++++++++++++++++++++<div+class="box-body"+style="display:+none;">+++++++++++++++++++++++<div+class="table-responsive">++++++++++++++++++++++++++++++++++++++++++++++++++++++</div>+++++++++++++++++++++</div>++++++++++</div>|151185|151186|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|M|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|N|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|J|$]]

<p>The correct tested Steps which worked for me are :</p>

<ol>
<li>Add explicit style "display:none" to box-body</li>
<li><p>You are done :)</p>

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

                            &lt;!--Your content here --&gt;

                      &lt;/div&gt;&lt;!-- /.table-responsive --&gt;
                    &lt;/div&gt;&lt;!-- /.box-body --&gt;

        &lt;/div&gt;
</code></pre></li>
</ol>


blocks|key|153951|text|<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>
++</div>
++<div+class="box-body">
++++The+body+of+the+box
++</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|153952|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|2947578|text|这句话对我很管用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947579|我为菜单添加了“折叠-左”类，并为主要内容添加了"strech“类。|2947580|我将版本1用于AdminLTE。它分为左侧菜单和主要内容的side+class="+left+-side“和”right-side“。|2947581|所以，这是最终的代码：|2947582|<aside+class="left-side+collapse-left">+
+++++
</aside>
<aside+class="right-side+strech">+
++++
</aside>|code-block|syntax|javascript|2947583|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This soluction worked for me:</p>

<p>I added "collapse-left" class for the menu and added the "strech" class for the main content.</p>

<p>I use the version 1 for the AdminLTE. It is divided in aside class="left-side" for the left menu and aside class="right-side" for the main content.</p>

<p>So, this is the final code:</p>

<pre><code>&lt;aside class="left-side collapse-left"&gt; 
    &lt;!-- put the left menu here --&gt; 
&lt;/aside&gt;
&lt;aside class="right-side strech"&gt; 
    &lt;!-- put the main content here --&gt;
&lt;/aside&gt;
</code></pre>


blocks|key|2734892|text|我将此代码添加到boxWidget对象中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2734893|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);

++++++++});

++++}|code-block|syntax|javascript|2734894|并在初始化期间调用它：|2734895|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));
++++},|2734896|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I added this to the boxWidget object:</p>

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

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

        });

    }
</code></pre>

<p>and called it during initializiation: </p>

<pre><code>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));
    },
</code></pre>


blocks|key|2947657|text|将css类添加到index.html文件的body标记中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2947658|2947659|+侧栏-已关闭侧栏-折叠|blockquote|offset|length|style|BOLD|2947660|2947661|2947662|<body+class="hold-transition+sidebar-mini+sidebar-closed+sidebar-collapse+layout-fixed+layout-navbar-fixed+layout-footer-fixed">|code-block|syntax|javascript|2947663|entityMap^0|0|0|1|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|T|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|U|8|@$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Z|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|R|$]]

<p>Add css classes into body tag in the index.html file:</p>
<blockquote>
<p><strong>sidebar-closed sidebar-collapse</strong></p>
</blockquote>
<pre><code>&lt;body class=&quot;hold-transition sidebar-mini sidebar-closed sidebar-collapse layout-fixed layout-navbar-fixed layout-footer-fixed&quot;&gt;
</code></pre>


<p>AdminLTE is based on Bootstrap: <a href="https://github.com/almasaeed2010/AdminLTE" rel="noreferrer">https://github.com/almasaeed2010/AdminLTE</a></p>

<p><strong>Live Preview:</strong> <a href="http://almsaeedstudio.com/preview/" rel="noreferrer">http://almsaeedstudio.com/preview/</a></p>

<p>But I'm unsure as to how to make the collapsable boxes collapsed by default.</p>

<p>I'm assuming since it is built on Bootstrap, this should be rather straightforward. I've tried fellow implementations such as setting the id to "collapsedOne" and attempting to treat the divs as accordions, but to no avail.</p>

<p>On the AdminLTE/app.js ~line 45 there is code that implements slide up/slide down to collapse boxes. Ideally, what we'd want is to have the boxes be in the "slide up" state by default with the class "collapsed-box" so that when the icon is clicked, it executes "slide down".</p>

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

<p>Any suggestions?</p>

<p>Thanks in advance. </p>


AdminLTE collapsed boxes by default

AdminLTE基于Bootstrap：实时预览： 但我不确定如何在默认情况下使可折叠框折叠。我假设由于它是基于Bootstrap构建的，所以这应该是相当简单的。我尝试过其他实现，比如将id设置为"collapsedOne“，并尝试将div视为手风琴，但都无济于事。在AdminLTE/app.js ~ 45行上，有实现向上/向下滑动以折叠框的代码。理想情况下，我们想要的是让这些框处于默认的“向上滑

问默认情况下，AdminLTE折叠框
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问默认情况下，AdminLTE折叠框EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问默认情况下，AdminLTE折叠框
EN