Question

Bootstrap具有在您正确使用.collapse类时触发的便捷事件。当使用AdminLTE的可折叠框时，我希望我能做类似的事情，以便在完全折叠时我可以在框内停用渲染，并在完全打开时重新激活渲染。

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

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

但是在登录事件之后，看起来AdminLTE的可折叠框似乎不会触发这些事件。我已经搜索过AdminLTE的可折叠框是否有类似的事件，但它似乎并不存在。我还看看我是否可以在将崩溃的盒子类添加到有问题的div时制作一个监听器，但这似乎不是一个可行的选项，因为solutions建议你自己解雇这个事件。不幸的是，我无法控制何时添加课程。

有没有人有解决方案？提前谢谢！

Answer 1

您可以修改adminLTE的app.js文件以达到您想要的效果。只需在addClass和removeClass方法之后添加一个触发器，这些方法分别在完成折叠（slideUp）和扩展（slideDown）功能后调用。

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]);
});

Answer 2

我遇到了同样的问题。

我曾经这样试过：

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

但它不起作用。

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

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

这是在关闭框之前执行的。

Answer 3

就我而言，我不想编辑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 ...");
    }
});

Answer 4

以我为例，当使用Admin-LTE 3.0并希望使用最大化和最小化卡之类的小部件卡时。

第一

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

const {
    username,
    image,
    uid
}: IUser = { ...data.user || {} };

第二

我做了<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>  </div>  <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>  </div> 函数来接收触发事件：

card_collapse()

是的！

致谢

AdminLTE框折叠触发器/事件侦听器

4 个答案: