当选项卡面板父元素折叠时，jQuery UI选项卡难题

我正在构建一个使用jQuery UI选项卡的面板控件，如下所示：

选项卡位于标题中，选项卡面板嵌套在父元素中的单个包含（

div.form-panel-contents

）下，我使用该包含展开/折叠面板内容。问题是，当我通过slideUp折叠包含的div时，Tabs检测到tab panels容器不可见，并将CSS类

ui Tabs hide

应用于每个嵌套的tab面板，这将所有tab面板设置为

display:none

我的问题是，当父div折叠时，如何阻止它应用

ui选项卡hide

类？

当我更改包含div的状态时，我希望选项卡面板的状态保持不变，以便上/下滑动看起来流畅。我也很好奇这个工具是如何检测到父元素在第一时间被折叠的

代码：

if ($.fn.tabs)
    $(".ui-tabs").tabs();

-

新面板外观-测试





内容内容内容内容内容内容

内容内容内容内容
输入某物

我找到了问题所在。显然，我有一个额外的

锚定标记

，它被添加到

li.handle_按钮

元素中，这个锚定标记与选项卡无关，而是用于定制的东西。仅此标记的存在就对jQuery选项卡的行为造成了影响。我把这个元素改成了一个span，现在一切都很好。

我发现了问题所在。显然，我有一个额外的

锚定标记

，它被添加到

li.handle_按钮

元素中，这个锚定标记与选项卡无关，而是用于定制的东西。仅此标记的存在就对jQuery选项卡的行为造成了影响。我把这个元素改成了一个span，现在一切都很好。

我可以在选项卡面板上复制你提到的类，但是我没有看到slideUp/slideDown动画。“你真的在动画中看到了一些奇怪的东西吗？”@Andrew-很好，在你的评论之后，我尝试在我的应用程序之外运行它，而你的右边它确实起作用了。我已经在下面的回答中对问题的原因进行了评论。我可以在选项卡面板上复制您提到的类，但是我没有看到slideUp/slideDown动画受到影响。“你真的在动画中看到了一些奇怪的东西吗？”@Andrew-很好，在你的评论之后，我尝试在我的应用程序之外运行它，而你的右边它确实起作用了。我在下面的回答中对问题的原因进行了评论。

<div class="widget ui-tabs form-panel-container">
    <ul class="title_bar">
        <li class="handle"><h5>New Panel Look - Test <span class="asterisk"></span></h5></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_1">Tab Name 1</a></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_2">Tab Name 2</a></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_3">Tab Name 3</a></li>                        
        <li class="handle_buttons"><a href="" class="handle_btn expand"></a><a href="" class="handle_btn question"></a></li>
    </ul>
    <div class="form-panel-contents">
        <div>
            <div id="tab_name_1">
                <div class="text_area">
                    <div class="padder">
                        <p> content content content content content content content content content content content content content content content content content content</p>
                    </div>
                </div>
                <div class="action_bar">
                    <div class="pad">
                        <a href="" class="btn"><label></label>Name of Button</a>
                    </div>
                </div>
            </div><!-- end wrapper div -->
            <div class="text_area" id="tab_name_2">
                <div class="padder">
                    <textarea>content content content content content content content content content content content content</textarea>
                </div>
            </div>
            <div class="text_area" id="tab_name_3">
                <div class="padder">
                    <h5>Input Something<span class="asterisk"></span></h5>
                    <div class="title_container"><input type="text" id="title"></div>
                </div>
            </div>
        </div>
    </div>
</div>