Question

我希望能够创建两个或更多可折叠标签小部件。但是，当我尝试一个非常简单的情况时，折叠第一个小部件中的选项卡将会＃34;摆动＆＃34;不合需要的第二个小部件。我在这个例子中做错了导致这个吗？这是一个错误吗？有谁知道如何让这些标签独立崩溃？

要产生我正在谈论的问题，请折叠第一个小部件中的一个标签。执行此操作时，您将看到第二个窗口小部件移动的距离等于第一个窗口小部件中折叠的高度。

HTML：

<h2>Collapsible Tabs Bug</h2>
<div style="height: 800px;"> 
    <div id="tabs_a" style="width: 300px;">
        <ul>
            <li><a href="#tabs_a-1">One</a></li>
            <li><a href="#tabs_a-2">Two</a></li>
            <li><a href="#tabs_a-3">Three</a></li>
        </ul>
        <div id="tabs_a-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

    <div id="tabs_b" style="width: 300px; float: right;">
        <ul>
            <li><a href="#tabs_b-1">One</a></li>
            <li><a href="#tabs_b-2">Two</a></li>
            <li><a href="#tabs_b-3">Three</a></li>
        </ul>
        <div id="tabs_b-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
</div>

使用Javascript：

$(document).ready(function () {
        $('#tabs_a').tabs({ collapsible: true }).draggable({ snap: true });
        $('#tabs_b').tabs({ collapsible: true }).draggable({ snap: true });
})

Answer 1

嘿，请参阅Demo

<h2>Collapsible Tabs Bug</h2>
<div style="height: 800px;"> 
    <div id="tabs_a" style="width: 300px; float:left;">
        <ul>
            <li><a href="#tabs_a-1">One</a></li>
            <li><a href="#tabs_a-2">Two</a></li>
            <li><a href="#tabs_a-3">Three</a></li>
        </ul>
        <div id="tabs_a-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_a-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

    <div id="tabs_b" style="width: 300px; float: right;">
        <ul>
            <li><a href="#tabs_b-1">One</a></li>
            <li><a href="#tabs_b-2">Two</a></li>
            <li><a href="#tabs_b-3">Three</a></li>
        </ul>
        <div id="tabs_b-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="tabs_b-3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
</div>

jQuery-UI可折叠标签不能独立折叠

1 个答案: