使用jquery设置元素默认关闭答案

【问题标题】：Use Jquery to set an element closed by default使用jquery设置元素默认关闭
【发布时间】：2015-05-13 07:16:27
【问题描述】：

我有一些 Jquery，当您单击图标以上下滑动某些内容时会添加折叠事件，如下所示：

$("[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");
        //Convert minus into plus
        $(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
        bf.slideUp();
    } else {
        box.removeClass("collapsed-box");
        //Convert plus into minus
        $(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
        bf.slideDown();
    }
});

但我还想做的是向某些元素添加相同的 .collapsed-box 类，但默认为使它们开始折叠/关闭，但之后打开和关闭事件仍然有效。

我是否需要编辑以上内容或添加其他功能？

谢谢

【问题讨论】：

只需在页面初始化默认关闭的元素的html中添加类.collapsed-box（或使用jquery添加，如$('.collapsed-default').addClass('collapsed-box')）

标签： jquery css

【解决方案1】：

最初我认为您可以在所有元素上触发点击事件，但您可能不想在页面加载时看到动画（即滑动）。因此，您必须为此添加一些代码。我认为以下方法可以：

var $collapsables = $("[data-widget='collapse']");

$collapsables.each(function() {
    var $collapsable = $(this),
        $box = $collapsable.closest(".box");
    if ($box.hasClass("collapsed-box")) {
        $collapsable.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
        $box.find(".box-body, .box-footer").hide();
    }
});

注意：上面的代码使用.closest(".box")，而不是.parents(".box").first()。

【讨论】：