使用Bootstrap折叠插件进行Javascript切换

wgxvkvu9 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(165)

我尝试使用Bootstrap collapse插件的toggle函数编程。当我点击accordion-heading中的链接时，我设法切换了一个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'
            });
            // ...
        }
    )
});

我错过什么了吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/11207238/javascript-toggle-with-bootstrap-collapse-plugin

3条答案

按热度按时间

vs91vp4v1#

我猜很多人都遇到过这种情况。
当你调用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进程，因为如果你已经在同一个元素上调用过它，它就会中止，这就是为什么它只运行了一次。

赞(0）回复(0）举报 2022-12-07

vx6bjr1n2#

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

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

赞(0）回复(0）举报 2022-12-07

7vux5j2d3#

我发现，只需调用两次collapse，一次使用parent，一次不使用parent，就可以很好地实现这个目的--由于层次结构的原因，这种解决方案在我的解决方案中更可取。

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

赞(0）回复(0）举报 2022-12-07

我来回答

使用Bootstrap折叠插件进行Javascript切换

3条答案

相关问题

热门标签

最新问答