Html 默认情况下，管理折叠框
AdminLTE基于引导： 现场预览： 但我不确定如何使可折叠框默认折叠 我假设，由于它是建立在自举的基础上，这应该是相当简单的。我也尝试过类似的实现，比如将id设置为“collapsedOne”，并尝试将div视为手风琴，但没有效果 在AdminLTE/app.js~第45行，有一段代码实现了向上/向下滑动以折叠框。理想情况下，我们想要的是使框在默认情况下处于“向上滑动”状态，类为“折叠框”，这样当单击图标时，它会执行“向下滑动” 有什么建议吗 提前谢谢Html 默认情况下，管理折叠框,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,AdminLTE基于引导： 现场预览： 但我不确定如何使可折叠框默认折叠 我假设，由于它是建立在自举的基础上，这应该是相当简单的。我也尝试过类似的实现，比如将id设置为“collapsedOne”，并尝试将div视为手风琴，但没有效果 在AdminLTE/app.js~第45行，有一段代码实现了向上/向下滑动以折叠框。理想情况下，我们想要的是使框在默认情况下处于“向上滑动”状态，类为“折叠框”，这样当单击图标时，它会执行“向下滑动” 有什么建议吗 提前谢谢 $（“[data widget='co
$（“[data widget='collapse']”）。单击（）$("[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();
}
});
当页面以初始状态加载时，为什么不将
折叠框添加到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 -->
以下是步骤：
将减号图标更改为加号
向框体添加显式样式“显示：无”
将类“折叠的长方体”添加到长方体中
对我有效的正确测试步骤包括：
向框体添加显式样式“显示：无”
你完成了：）
方框标题在这里
适用于使用AdminLTE 2.1.1的用户
只需在
之前：
<body class="skin-blue sidebar-mini">
之后：
<body class="skin-blue sidebar-mini sidebar-collapse">
对于一个指定div
$(function() { $('your-button-id').click(); })
总的来说
$(function() { $("[data-widget='collapse']").click(); })
只需将“折叠框”添加到框中，然后更改此选项：
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
到
这对我来说应该很有用一个打开的盒子：
折叠的盒子：
然后当然要更改按钮上的图标
<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 -->
可扩展
盒子的主体
这个解决方案对我有效：
我为菜单添加了“CollapseLeft”类，并为主要内容添加了“strech”类
我对管理员使用版本1。左侧菜单分为aside class=“left side”，主要内容分为aside 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>
我将其添加到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));
},
在管理LTE 3中，默认情况下，使用主卡上的类折叠卡
像这样
<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，然后初始框以加号开头I通过编辑更新了问题。调用简单的“折叠”不起作用。我知道这会在页面加载后折叠我的框，但是我希望默认情况下折叠框。但是如何处理正负信号@user4036441？使用此解决方案，当页面加载时，框会折叠，但我们看到的信号是减号信号。@AloysiadeArgenteuil只需将图标更改为fa plus
，而不是fa减号
。这是初始图标，之后AdminLTE的javascript应该处理反转。感谢这么简单的解决方案。嘿，一些html
！你对该守则有何解释或评论？
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));
},
<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>