折叠选项卡面板父元素时的jQuery UI选项卡难题答案

【问题标题】：jQuery UI Tabs conundrum when tab-panel parent element is collapsed折叠选项卡面板父元素时的jQuery UI选项卡难题
【发布时间】：2010-12-31 01:01:50
【问题描述】：

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

选项卡位于标题中，选项卡面板嵌套在父元素内，位于我用于展开/折叠面板内容的单个包含 (div.form-panel-contents) 下。问题是当我通过 slideUp 折叠包含 div 时，Tabs 以某种方式检测到选项卡面板容器不可见并将 CSS 类 ui-tabs-hide 应用于每个嵌套选项卡面板，这将所有选项卡面板设置为 display: none。

我的问题是如何阻止它在父 div 折叠时应用 ui-tabs-hide 类？

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

代码：

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

<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>

【问题讨论】：

我能够重现您提到的应用于选项卡面板的类，但我没有看到 slideUp/slideDown 动画受到影响。你真的看到动画有什么奇怪的地方吗？
@Andrew - 好电话，在您发表评论后，我尝试在我的应用程序之外运行它，您的权利它确实有效。我在下面的回答中评论了问题的原因。

标签： jquery panel jquery-ui-tabs

【解决方案1】：

我发现了问题所在。显然我有一个额外的anchor tag 被添加到li.handle_button 元素中，这个锚标记与选项卡无关，但用于自定义。只是这个标签的存在给 jQuery 选项卡行为带来了麻烦。我将此元素更改为跨度，现在一切正常。

【讨论】：