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

Question

我正在运行 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's”都包含标准的 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 结构，但只是因为我想将元素快速放入左右。它也应该适用于您的结构。