Javascript与Bootstrap崩溃插件切换

Question

我尝试以编程方式使用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'
            });
            // ...
        }
    )
});

我错过了什么？

Answer 1

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

当您调用collapse函数(FYI或任何引导函数)时,如果传递对象,则表示您启动了折叠.该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进程,因为如果你已经在同一个元素上完成它就会中止.这就是它只工作一次的原因.