javascript - 转到新选项卡时 Accordion 会弄乱

Question

我已经将一些 jQuery UI 插入在一起，并且大部分都工作正常。但我有一个问题，我有一页选项卡，每个表中都有可排序的 Accordion 元素...

一切似乎都工作正常，直到我将一个元素移动到新选项卡，它似乎失去了它的父元素。当我展开放置的 Accordion 时，它要么超出容器，要么根本不显示，这取决于 Accordion 在放入新选项卡时是否打开。

我已经整理了我的代码的 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;
});

Answer 1

我知道发生了什么......就在

$(this).appendTo($list).show("fast");

我添加了

$(this).removeAttr('style');

它解决了我的问题。我仍然不知道样式来自哪里...这是一个工作 jsfiddle http://jsfiddle.net/33Wzs/7/