4

Bootstrap 有方便的事件，当您正确使用它们的 .collapse 类时会触发这些事件。在使用 AdminLTE 的可折叠盒子时，我希望我可以做类似的事情，这样我可以在盒子完全折叠时停用盒子内部的渲染，并在盒子完全打开时重新激活渲染。

我尝试使用此处的事件，例如 shown.bs.collapse 或 hidden.bs.collapse，按照他们的示例：

$('#myCollapsible').on('hidden.bs.collapse', function () {
    // do something…
})

但是在登录事件后，AdminLTE 的可折叠框似乎不会触发这些事件。我搜索了 AdminLTE 的可折叠盒子是否有类似的事件，但它似乎不存在。我还查看了是否可以在将折叠框类添加到相关 div 时创建一个侦听器，但这似乎不是一个可行的选择，因为解决方案建议您自己触发事件。不幸的是，我无法控制何时添加课程。

有人对此有解决方案吗？提前致谢！

4

4 回答 4

3

你可以修改 adminLTE 的 app.js 文件来实现你想要的。只需在折叠（slideUp）和展开（slideDown）函数分别完成后调用的addClass和removeClass方法之后添加一个触发器。

box_content.slideUp(_this.animationSpeed, function () {
    box.addClass("collapsed-box");
    box.trigger('collapsed',[box, element]);
});

box_content.slideDown(_this.animationSpeed, function () {
    box.removeClass("collapsed-box");
    box.trigger('expanded',[box, element]);
});
于 2017-03-06T23:43:06.677 回答
1

就我而言，我不想编辑app.js（因为它是通过凉亭自动安装的），所以这是一个替代方案：

$("#my-box-id [data-widget='collapse']").click(function() {
    var box = $(this).parents(".box").first();
    if (!box.hasClass("collapsed-box")) {
        console.log("collapsing #my-box-id ...");
    } else {
        console.log("expanding #my-box-id ...");
    }
});
于 2018-02-13T10:19:36.633 回答
1

我遇到了和你一样的问题。

我试过这样：

$(seletor).on("remove", function (){ //code here })

但它不起作用。

我解决了我的问题，在删除按钮上添加了一个“点击”事件：

$("#boxdiv button").on("click", function () {
   // Close event
})

这是在盒子关闭之前执行的。

于 2016-10-07T02:45:50.743 回答
0

就我而言，当使用 Admin-LTE 3.0 并希望使用最大化和最小化卡片等小部件卡片时。

第一的

我修改了Admin-LTE模板的默认结构：

 <div class="card card-success" id="card-slide">
        <div class="card-header">
            <h3 class="card-title">Bagian Sliders</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="maximize" onclick="card_collapse('#card-slide')" title="Click to expand"><i class="fas fa-expand"></i>
                </button>
            </div>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <div class="card-on-minimized">
                Pengaturan slider yang ada pada bagian beranda halaman.
            </div>
            <div class="card-on-maximized d-none">
                Maximizable
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

第二

我制作了card_collapse()接收触发事件的函数：

function card_collapse(id) {
     if (!$(id).hasClass('maximized-card')) {
         $(id + ' .card-on-minimized').addClass('d-none');
         $(id + ' .card-on-maximized').removeClass('d-none');
     } else {
         $(id + ' .card-on-minimized').removeClass('d-none');
         $(id + ' .card-on-maximized').addClass('d-none');
     }
}

就是这样！

问候

于 2020-04-07T03:21:46.007 回答