JavaScript的切换与引导崩溃插件(Javascript toggle with Bootst

I try to use the toggle function of the Bootstrap collapse plugin programmatically. I manage to toggle a div when I click on the link in accordion-heading but it works only once, that is to say I cannot click again to hide the div.

Here is my code :

<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>

And later in the JSP :

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

Did I miss something?

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进程，因为它会中止，如果你已经完成了它在相同的元素。 这就是为什么它的工作一次。

Answer 2:

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

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

Answer 3:

我发现，简单地调用崩溃两次，一次与父母，一次不带，做的伎俩相当不错 - 该解决方案由于层次是我的解决方案优选。

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

文章来源: Javascript toggle with Bootstrap collapse plugin