Навигация с вкладками. Проблемы с Jquery и CSS - PullRequest
Новая
       7

Навигация с вкладками. Проблемы с Jquery и CSS

3 голосов
/ 26 августа 2011

Проблемы со сценарием ранее обсуждались. Здесь

По сути, мой html ведет себя не так, как я хочу.

Нажатие: Все - Показать все контейнеры 

<div class="slide">

Экшн Приключения - Дисплей 

<div class="slide" title="Action Adventure">

Драма - Дисплей 

<div class="slide" title="Drama">

И т. Д....

ИСПРАВЛЕНО При начальной загрузке все контейнеры загружаются только при первой загрузке.После того, как я щелкну по другому жанру, затем вернусь к «Все». Кажется, он ведет себя странно, только отображая все остальные

Новая демонстрация здесь

Thisпроблема остается Затем я заметил, что после начальной загрузки, щелкая вниз по списку, он отображает следующий контейнер вместо того, с тем же заголовком и текстом.Я думаю, что это связано с index ();но я не совсем уверен.Мне нужно, чтобы эта чертовщина работала правильно.

Демонстрация здесь

Спасибо, ребята!

ps, есть другие jquery, чтобы скрыть nth-child.просто проигнорируйте это.

Спасибо за помощь!

Последнее, что мне нужно, - это спрятать все первоочередные ul, когда все они видны.За исключением самого первого в приключенческом боевике.

Ответы [ 2 ]

1 голос
/ 27 августа 2011

Здесь:

Рабочая ДЕМО

демо с комментариями

Здесь мы используем .index() числонажатие li - чтобы открыть вкладку, чей :eq() равен этому .index().

Посмотрите на эти таблицы: До у вас было это: 

li index        --->    .slide index
_____________________________________

Action  | 0     --->     Action | 0 
Comedy  | 1     --->     Comedy | 1
Drama   | 2     --->     Drama  | 2
Docume. | 3     --->     Docume.| 3

И каждый li красиво открывал свою соответствующую вкладку .slide.

Но чем вы решили добавить элемент .all, который откроет ВСЕ ваши вкладки, Но теперь у вас есть это: 

li index        --->     .slide index
_____________________________________
All     | 0  (OPEN ALL)
Action  | 1     --->     Action | 0 
Comedy  | 2     --->     Comedy | 1
Drama   | 3     --->     Drama  | 2
Docume. | 4     --->     Docume.| 3

Как вы можете видеть .all не имеет своей конкретной вкладки "брат"открыть.Он просто должен открыть все вкладки!
Но, добавив этот «дополнительный» элемент li, вы «переместили» порядковые номера других li элементов на 1 вверх.
Теперь нажмите li Drama , теперь с индексом 3 откроется вкладка с таким же индексом.Но это ТАБ, содержащий документальные фильмы!так как он по-прежнему имеет индекс 3 !

Чтобы исправить эту новую проблему, вам нужно искать вкладку, которая имеет ЭТОТ индекс, но -1.
( Drama index (3) -1 = открыть вкладка Drama index (2)) 

$('ul.nav li').click(function() {

    var i = $(this).index()-1;  
    $('.slide:eq('+i+')').fadeIn(400);

});

Имея это в виду, вам просто нужно .fadeOut() все ранее открытые вкладки, используяJQuery :visible селектор.Пример: 

$('.slide:visible').fadeOut(400);

Это предотвратит взаимодействие вашего скрипта со всеми другими .slide.

А вот ваш скрипт: 

$('.slide').css({position:'relative',display:'block'});

$('ul.nav li').click(function() {
    $(this).addClass('btnSelect').siblings().removeClass('btnSelect');

    if( $(this).hasClass('all') ){
        $('.slide:visible').fadeOut(400,function(){
            $('.slide').fadeIn(400);
            $('.grid ul li:nth-child(1)').show();
        });
        return;
    }

    var i = $(this).index()-1;    
    $('.slide:visible').fadeOut(400,function(){
        $('.slide:eq('+i+')').fadeIn(400);
        $('.grid ul li:nth-child(1)').hide();
    });
});

Вы также можете использовать:$('.slide').eq(i).fadeIn(400); выглядит красивее!:)

1 голос
/ 26 августа 2011

Это не полностью отвечает на ваш вопрос, но обязательно остановите анимацию в очереди, прежде чем делать что-то вроде затухания: 

$(".slideMove .slide").stop(true,true).fadeOut("slow");

в противном случае, нажатие на кнопку пару раз приведет к многократному запуску анимации

...