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

Question

我正在运行一个Wordpress主题(Slate),它附带了实现标签的短代码jquery.tabs.min.js.

使用他们的短代码我尝试嵌套选项卡,它不起作用,很可能是因为他们如何设计短代码,所以我创建了一些简单的jQuery和额外的HTML来制作嵌套选项卡区域,然后包含原始主题的jquery选项卡短代码.

一切都在工作,但是有一个问题让我感到困惑:当加载子标签时包含的标签少于前面的父标签子标签,那么子标签就会溢出,jQuery会获得子标签从上一组中,将它们附加到当前选项卡.

这里有一个工作的例子.请注意,"锻炼"区域中的"冬季运动活动"子选项卡也会加载到夜生活区域,而"游览"父项选项卡中的博物馆和旅游景点也会加载到"日历"父级选项卡中,该选项卡应仅包含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()
        });
});

然后,这些" .subcategoriesdiv"中的每一个都包含标准的jQueryUI选项卡.

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

Answer 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 
            } 
    });
});

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