带有 Bootstrap 折叠插件的 Javascript 切换

Posted 2023-03-24

【中文标题】带有 Bootstrap 折叠插件的 Javascript 切换

【英文标题】：Javascript toggle with Bootstrap collapse plugin

【发布时间】：2012-06-27 18:22:02

【问题描述】：

我尝试以编程方式使用 Bootstrap 折叠插件的切换功能。 当我点击手风琴标题中的链接时，我设法切换了一个 div，但它只工作一次，也就是说我不能再次点击来隐藏 div。

这是我的代码：

<div id="accordion" class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a id="program$bean.id" data-parent="#accordion" 
                   class="accordion-toggle">
            ...
            </a>
        </div>
        <div id="collapse$bean.id" class="accordion-body collapse">
            <div class="accordion-inner">
            ...
        </div>
    </div>
</div>

后来在 JSP 中：

$.each($('#accordion a.accordion-toggle'), function(i, link)
    $(link).on('click', 
        function()
            // ...
            $('#collapse' + id_of_a_bean).collapse(
                toggle : true,
                parent : '#accordion'
            );
            // ...
        
    )
);

我错过了什么吗？

【参考方案1】：

我猜这发生在很多人身上。

当您调用collapse 函数（仅供参考或任何引导函数）时，如果您传递一个对象，则意味着您启动折叠。 toggle 选项仅在调用时切换一次 (doc)。

您必须使用参数调用一次，然后仅使用操作调用，作为字符串。

$.each($('#accordion a.accordion-toggle'), function(i, link)
    var $collapsible = $('#collapse' + id_of_a_bean); // Let's be thorough

    $collapsible.collapse(
        toggle : true, // May not be necessary anymore
        parent : '#accordion'
    );

    $(link).on('click', 
        function()
            // ...
            $collapsible.collapse('toggle'); // Here is the magic trick
            // ...
        
    );
);

现场演示：http://jsfiddle.net/Sherbrow/uycBa/

确切地说，您只能调用一次 init 进程，因为如果您已经在同一个元素上完成了它，它就会中止。这就是为什么它只工作了一次。

【讨论】：

实际上，我确实错过了一些东西 :) 现在它可以工作了，非常感谢！确实， toggle : true 不再有用了；）

【参考方案2】：

类似的问题，我只是检查元素是否可见：

$("#myDiv").is(":visible") ? $("#myDiv").collapse('hide') : /*do nothing*/;

【参考方案3】：

我发现只需调用折叠两次，一次使用父项，一次不使用，效果非常好 - 由于层次结构，此解决方案在我的解决方案中更可取。

onclick="
$('@("#collapse" + lead.LeadId)').collapse(parent: '#accordion', toggle: true);
$('@("#collapse" + lead.LeadId)').collapse('toggle');"