jquery - 标签式导航。 jQuery和CSS问题

前面讨论的脚本问题。
Here
基本上，我的html没有按我希望的方式运行。
点击：
全部-显示所有容器

<div class="slide">

动作冒险-展示

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

戏剧表演

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

等等…
固定的
在首次装载时，装载所有容器当前仅在首次装载时工作。在我点击了Anather流派之后，再回到“全部”，它似乎表现得令人窒息，只显示彼此
New Demo Here
这个问题仍然存在
然后，我注意到，在初始加载之后，单击列表，它将向下显示下一个容器，而不是具有相同标题和文本的容器。我认为这与index（）有关；但我不完全确定。我要让这该死的东西正常工作。
Demo here
谢谢你们！
ps，还有其他jquery可以隐藏第n个子项。别理它。
谢谢你的帮助！
我需要帮助的最后一件事是当所有的第一个孩子都是可见的时候，隐藏所有的ul。除了第一部动作冒险片。

最佳答案

在这里：
Working DEMO
demo with comments
在这里，我们使用点击的.index()数打开一个li等于这个:eq()的选项卡。
看看这张桌子：
Before你有这个：

li index        --->    .slide index
_____________________________________

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

每个.index()都很好地打开了各自的选项卡。
但是你决定添加一个元素来打开你的所有标签，
但现在你有了这个：

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

如您所见，li没有要打开的特定“兄弟”选项卡。它只需要打开所有标签页！
但是，将这个“extra”.slide元素相加，您已经将其他.all元素的索引号“移动”了1。
现在单击.all戏剧，现在有索引3，它将打开具有相同索引的选项卡。但那是包含纪录片的标签！因为它还有3号索引！
要解决这个新问题，您必须搜索一个索引号为-1的选项卡。
（戏剧索引（3）-1=打开戏剧选项卡索引（2））

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

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

});

考虑到这一点，您只需要使用jqueryli选择器来li所有以前打开的选项卡。前任：

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

这将防止干扰您的脚本与所有其他li。
这是你的剧本：

$('.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();
    });
});

你也可以使用：.fadeOut()看起来更漂亮！：）