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

Question

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

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

我的问题是当父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>

Answer 1

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