jquery-mobile - 如何在 Jquery Mobile 中平滑 Collapsible_set

Question

我使用 jQuery mobile 创建了一个 Collapsible 集。它工作正常，但不像 Jquery UI 中的 Accordion 那样流畅。当我点击标题时，它会突然膨胀。

有什么办法可以让它顺利吗？

Answer 1

将click侦听器附加到可折叠的标题 .ui-collapsible-heading-toggle。单击后，.slideDown()或.slideUp()基于单击的可折叠项是折叠还是展开。展开一个可折叠项时，其他的将被折叠，即一次只能展开一个可折叠项。

$(".ui-collapsible-heading-toggle").on("click", function (e) {
    var current = $(this).closest(".ui-collapsible");
    if (current.hasClass("ui-collapsible-collapsed")) {
        $(".ui-collapsible-content", current).slideDown(300);
        current.siblings(".ui-collapsible:not(.ui-collapsible-collapsed)").find(".ui-collapsible-content").slideUp(300);
    } else {
        $(".ui-collapsible-content", current).slideUp(300);
    }
});

演示