Html AdminLTE 默认折叠框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24851630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AdminLTE collapsed boxes by default
提问by user4036441
AdminLTE is based on Bootstrap: https://github.com/almasaeed2010/AdminLTE
AdminLTE 基于 Bootstrap：https: //github.com/almasaeed2010/AdminLTE
Live Preview:http://almsaeedstudio.com/preview/
实时预览：http : //almsaeedstudio.com/preview/
But I'm unsure as to how to make the collapsable boxes collapsed by default.
但我不确定如何使可折叠框默认折叠。
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.
我假设因为它是建立在 Bootstrap 上的，所以这应该相当简单。我尝试过其他实现，例如将 id 设置为“collapsedOne”并尝试将 div 视为手风琴，但无济于事。
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".
在 AdminLTE/app.js ~line 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();
}
});
Any suggestions?
有什么建议？
Thanks in advance.
提前致谢。
回答by user4036441
When the page loads in its initial state, why not just add the collapsed-boxclass to box element?
当页面在其初始状态加载时，为什么不将collapsed-box类添加到框元素？
The below will render in the collapsed state and function without modifying AdminLTE:
下面将在不修改 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 -->
回答by smistry
$("[data-widget='collapse']").click()Add that to a JavaScript file that runs at the bottom
$("[data-widget='collapse']").click()将其添加到在底部运行的 JavaScript 文件中
回答by user2649102
Here are the steps:
以下是步骤：
- Change the minus icon to plus .
- Add explicit style "display:none" to box-body
- Add the class "collapsed-box" to the box
- 将减号图标更改为加号。
- 向 box-body 添加显式样式“display:none”
- 将类“collapsed-box”添加到框中
回答by brianlasta
For those who are using AdminLTE 2.1.1
对于使用AdminLTE 2.1.1 的用户
just simply add sidebar-collapseclass on the <BODY>
只需简单地添加sidebar-collapse类<BODY>
Before:
前：
<body class="skin-blue sidebar-mini">
After:
后：
<body class="skin-blue sidebar-mini sidebar-collapse">
回答by Ola Ekelund
An open box:
<div class="box">
一个打开的盒子：
<div class="box">
A collapsed box:
<div class="box collapsed-box">
一个折叠的盒子：
<div class="box collapsed-box">
And then ofcourse change the icon on the button
然后当然改变按钮上的图标
回答by jaqb
$("[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();
}
});
and use in section div
并在部分 div 中使用
回答by Unicorn Tears
In Admin LTE 3 collapse by default by using the class collapsed-cardon the main card.
在 Admin LTE 3 中，默认使用collapsed-card主卡上的类折叠。
Like this
像这样
<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>
You should change the icon to a fas fa-plus then the initial box starts with a plus
您应该将图标更改为 fas fa-plus 然后初始框以加号开头
回答by maartenvr98
Simply add "collapsed-box" to the box and change this:
只需将“collapsed-box”添加到框中并更改它：
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
to
到
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
This should work for me
这应该对我有用
回答by jtraslavi
for one specify div
对于一个指定 div
$(function() { $('your-button-id').click(); })
for all
对所有人
$(function() { $("[data-widget='collapse']").click(); })
回答by Robin Agrahari
The correct tested Steps which worked for me are :
对我有用的正确测试步骤是：
- Add explicit style "display:none" to box-body
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><!-- /.box-header --> <div class="box-body" style="display: none;"> <div class="table-responsive"> <!--Your content here --> </div><!-- /.table-responsive --> </div><!-- /.box-body --> </div>
- 向 box-body 添加显式样式“display:none”
你完成了:)
<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>
