9

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

我错过了什么?

4

3 回答 3

21

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

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

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

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

于 2012-06-26T12:49:04.400 回答
3

类似的问题,我只是检查元素是否可见:

$("#myDiv").is(":visible") ? $("#myDiv").collapse('hide') : /*do nothing*/;
于 2014-09-19T02:12:02.267 回答
1

我发现简单地调用折叠两次,一次使用父项,一次没有,这个技巧非常好 - 由于层次结构,这个解决方案在我的解决方案中更可取。

onclick="
$('@("#collapse" + lead.LeadId)').collapse({parent: '#accordion', toggle: true});
$('@("#collapse" + lead.LeadId)').collapse('toggle');"
于 2014-09-11T15:53:03.177 回答