在自定义 JQuery 中嵌套 JQuery UI 选项卡答案

【问题标题】：Nesting JQuery UI tabs in custom JQuery在自定义 JQuery 中嵌套 JQuery UI 选项卡
【发布时间】：2012-06-27 20:34:09
【问题描述】：

我正在运行一个 Wordpress 主题 (Slate)，它带有实现由 jquery.tabs.min.js 提供支持的选项卡的简码。

使用他们的简码我尝试嵌套标签，但没有成功，很可能是因为他们如何设计简码，所以我创建了一些简单的 jQuery 和额外的 HTML 来制作嵌套标签区域，然后包含原始主题的 jquery标签短代码。

一切正常，但有一个问题让我感到困惑：当加载的子选项卡包含的选项卡少于之前的父选项卡子选项卡时，就会出现子选项卡溢出，jQuery 得到上一组的子选项卡，将它们附加到当前选项卡。

一个工作示例是here。请注意，锻炼区域的“冬季运动活动”子选项卡也会加载到夜生活区域，游览父选项卡中的博物馆和旅游景点也会加载到日历父选项卡中，该子选项卡应仅包含 1 个子选项卡（蒙特利尔活动）。

所以我有一些奇怪的溢出来..
下面是我用于控制父选项卡的初学者 jQuery 代码。

$(function(){
    var subcat = $('.sub-categories'),
        subdivfirst = $('.sub-categories div:first'),
        subdiv = $('.sub-categories div'),
        cattitlefirst = $('.categories ul li:first'),
        cattitle = $('.categories ul li');

        subcat.children('div').hide();  
        subdivfirst.show();     
        cattitlefirst.addClass('active');


        $('.categories li a').click(function(){
            var $this = $(this);

            cattitle.removeClass('active');
            subcat.children('div').hide();

            $this.parent('li').addClass('active');

            var catLink = $this.attr('id');
            var showcat = $('div #sub-' + catLink);

            showcat
                .fadeIn(600)    
                .find('.panes').show()
        });
});

这些“.subcategories div”中的每一个都包含标准的 jQueryUI 选项卡。

我认为 jQueryUI 选项卡和我创建的额外自制选项卡之间一定存在某种冲突，但我不确定如何追踪。任何清理我的代码的帮助、提示或想法将不胜感激。

【问题讨论】：

我刚刚检查了您提供的工作示例。你所说的对我来说不会发生：S（锻炼区域的“冬季运动活动”子选项卡也加载到夜生活区域，游览父选项卡中的博物馆和旅游景点也加载到日历父项中标签")
我可以确认上述评论。在 Chrome 中对我来说效果很好。如果您自己解决了问题，您可能需要在下面发布答案并将其标记为已解决。
能否请您 jsfiddle 这个以便我们使用 js 进行标记？
它确实有效jsbin.com/ubaqe
同上上面的 cmets——我在 Chrome 中尝试过。 Firefox 和 IE9，我没有遇到子选项卡出现在多个父选项卡中的问题。你用的是哪个浏览器？

标签： jquery jquery-ui nested jquery-ui-tabs

【解决方案1】：

为什么不对类别和子类别使用标准的 jquery UI 选项卡？您可以轻松地在 css 中添加自定义类，它会自动在子选项卡上打开第一个选项卡，或者如果您使用 cookie，它会打开最后一个选项卡，该选项卡在该主选项卡中打开。

我在想的是http://jsfiddle.net/3H33m

$(document).ready(function(){
    $('#Categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });

    $('.sub-categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });
});

仅将内容添加到第 1 类和第 2 类以及它们的子项。第二个主要类别子项基本上是从第一个复制的。我也改变了 HTML 结构，但这只是因为我想将元素快速放入左右。它也应该适用于您的结构。

【讨论】：