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

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与Bootstrap崩溃插件切换

3 个答案: