拖放到新标签时手风琴搞砸了答案

【问题标题】：Accordion messing up when dropping to new tab拖放到新标签时手风琴搞砸了
【发布时间】：2014-06-11 22:53:05
【问题描述】：

我已经将几块 jQuery UI 插入在一起，并且大部分情况下一切正常。不过我有一个问题，我有一个标签页，每个表中都有可排序的手风琴元素...

在我将元素移动到新标签之前，一切似乎都正常，它似乎失去了它的父元素。当我展开放置的手风琴时，它要么超出容器，要么根本不显示，这取决于放置到新标签时手风琴是否打开。

我已经整理了我的代码的 jsfiddle 示例。这是我的 jquery 和 jsfiddle http://jsfiddle.net/33Wzs/6/ 的链接，来回移动元素几秒钟应该会让您了解正在发生的事情。

我的 HTML

<div id="tabs" class="nav nav-tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a>

        </li>
        <li><a href="#tabs-2">Proin dolor</a>

        </li>
    </ul>
    <div id="tabs-1" class="tab-pane">
        <div id="accordion">
            <ul id="sortable1" class="connectedSortable ui-helper-reset">
                <li>
                    <header><span class="handle pull-left cursor-move">[move]</span> Item 1</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
                <li>
                    <header><span class="handle pull-left cursor-move">[move]</span> Item 2</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
                <li>
                    <header><span class="handle pull-left cursor-move">[move]</span> Item 3</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
                <li>
                    <header><span class="handle pull-left">[move]</span> Item 4</header>
                    <div>
                        <h4>Item 1</h4>

                        <p>Here is some text to go with <em>item #</em>. How does this work?</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="tabs-2">
        <div id="accordion2">
            <ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
        </div>
    </div>
</div>

我的 jQuery

$(function () {
    $("#accordion").accordion({
        collapsible: true,
        header: 'header',
        active: false,
        heightStyle: 'content'
    });
    $("#accordion2").accordion({
        collapsible: true,
        header: 'header',
        active: false,
        heightStyle: 'content'
    });
});

$(function () {
    var tabs = $("#tabs").tabs();
    tabs.find(".ui-tabs-nav").sortable({
        axis: "x",
        stop: function () {
            tabs.tabs("refresh");
        }
    });
});

$(function () {

    $("#sortable1, #sortable2").sortable().disableSelection();
    $("#sortable1, #sortable2").sortable("option", "handle", ".handle");

    var $tabs = $("#tabs").tabs();
    var $tab_items = $("ul:first li", $tabs).droppable({
        tolerance: 'pointer',
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            var $item = $(this);
            var $list = $($item.find("a").attr("href"))
                .find(".connectedSortable");
            ui.draggable.hide("fast", function () {
                $tabs.tabs("option", "active", $tab_items.index($item));
                $(this).appendTo($list).show("fast");
            });

        }
    });

    return false;
});

【问题讨论】：

我想我找到了罪魁祸首。在您的第一个选项卡中，您的源代码中有一个普通的
标记。将一个项目移动到另一个选项卡后，另一个选项卡使用此 li 标签：<li class="" style="height: 43px; width: 522px; display: list-item;"> 当我在检查器中删除样式属性时，显示是正确的。