Bootstrap：手风琴在展开时剥离 ui-droppable 类答案

【问题标题】：Bootstrap: accordion strips ui-droppable class on expandBootstrap：手风琴在展开时剥离 ui-droppable 类
【发布时间】：2012-09-27 18:03:59
【问题描述】：

Bootstrap 新手，手风琴有一些问题。希望有人能帮我解决。

基本上我有一个空手风琴和一个下拉菜单。每次在下拉菜单中进行选择时，都会将其添加到手风琴中，带有完整的.accordion-group 标记，但带有空的.accordion-body div。之后，这个手风琴组设置为 droppable 并自动添加 .ui-droppable 类。

之后，我可以将一堆其他 div 拖放到 .accordion-group 中，这些 div 将附加到该特定组的 .accordion-body 中。这部分工作正常，但是，只要我点击展开任何给定的.accordion-group，.ui-droppable 类就会从所有这些中剥离。

如何阻止它删除.ui-droppable 类？？

重现步骤：

使用 Bootstrap 页面中的 html 标记：（由于某种原因，我无法通过缩进 4 个空格将 HTML 格式化为代码，所以我只是将链接粘贴到它） http://twitter.github.com/bootstrap/javascript.html#collapse
添加 JS，使组可丢弃

$('#accordion2').find('.accordion-group').each(function() { $(this).droppable(); });
检查元素以确保设置了.ui-droppable 类
单击以展开组。任何组。
检查元素。 .ui-droppable 已被所有人删除

【问题讨论】：

标签： javascript jquery twitter-bootstrap droppable

【解决方案1】：

解决了这个问题，但我认为这是实现结果的一种非常愚蠢的方式，所以我对 Bootstrap 处理切换的方式不满意。我真的不认为有必要循环每个.accordion-group 以在每次有人打开或关闭一个部分时重新应用可放置属性。

每个部分只需一个按钮和一个 div 即可重做。

解决办法如下：

$('#host-groups').on('shown', function() {
    $('#host-groups').find('.accordion-group').each(function() {
        $(this).attr('id').droppable();

    });
});

$('#host-groups').on('hidden', function() {
    $('#host-groups').find('.accordion-group').each(function() {
        $(this).attr('id').droppable();

    });
});

/掌心

【讨论】：