Вложение вкладок пользовательского интерфейса JQuery в пользовательский JQuery

Я использую тему 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 и дополнительными самодельными вкладками, которые я создал, но я не знаю, как это отследить. Будем очень признательны за любую помощь, советы или идеи по очистке моего кода.

7
задан Gilles 'SO- stop being evil' 27 June 2012 в 22:33
поделиться