jquery - 在自定义JQuery中嵌套JQuery UI选项卡

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

使用他们的短代码，我尝试了嵌套选项卡，但是它没有用，最有可能是因为他们设计了短代码，所以我创建了一些简单的jQuery和额外的HTML来制作嵌套的选项卡区域，其中包含原始主题的jquery选项卡的短代码。

一切正常，但是有一个困扰我的问题:当加载的子选项卡包含的选项卡少于以前的父选项卡子选项卡时，子选项卡就会溢出，而jQuery会得到子选项卡来自上一个组，将它们附加到当前选项卡。

一个有效的示例是here。
请注意，“锻炼”区域中的“冬季体育 Activity ”子选项卡也会在夜生活区域中加载，而“游览”父选​​项卡中的“博物馆和旅游景点”也将在“日历”父选项卡中加载，该选项卡应仅包含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选项卡和我创建的额外的自制选项卡之间肯定存在某种冲突，但是我不确定如何跟踪它。任何帮助，技巧或想法来清理我的代码，将不胜感激。

最佳答案

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

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

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

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

仅在第一和第二类别中添加了内容，并为其添加了子项目。第二个主要类别子项目基本上是从第一个复制。我改变了HTML结构，但这只是因为我想将元素快速放入左右。它也应该与您的结构一起工作。

关于jquery - 在自定义JQuery中嵌套JQuery UI选项卡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11234423/