选项卡导航。Jquery 和 CSS 问题。

Question

之前讨论过的脚本问题。 这里

基本上，我的html没有按照我想要的方式运作。

点击： 全部 - 显示所有容器

<div class="slide">

动作冒险 - 显示

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

戏剧-显示

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

等等……

已解决 在初始加载时，只加载所有容器仅适用于第一次加载。当我点击另一个流派，然后回到“全部”时，它似乎表现奇怪，只显示每个其他的。

这里是新演示

这个问题仍然存在 然后，我注意到在初始加载后，点击列表下方时，它会显示下一个容器而不是具有相同标题和文本的容器。我认为这与index()有关，但我并不完全确定。我需要让这个该死的东西正常工作。

这里是演示

谢谢大家！

附言，还有其他jquery来隐藏nth-child。请忽略它。

感谢所有的帮助！

我最后需要协助的一件事是，在所有内容都可见时，隐藏所有的第一个子级ul。除了动作冒险下面的第一个。

- arkjoseph

Answer 1

这并不能完全回答你的问题，但在执行诸如淡出之类的操作之前，请确保停止排队的动画：

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

否则，点击按钮几次将导致动画一遍又一遍地运行。

- Christian

---

谢谢你，Christian。我点击流派后，容器不再闪烁了两次！ - arkjoseph

Answer 2

这里：

工作演示

带有注释的演示

在这里，我们使用点击的li的.index()数字 - 打开一个:eq()等于此.index()的TAB。

看一下这些表格： 之前你有这个：

li index        --->    .slide index
_____________________________________

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

每个

都很好地打开了它各自的选项卡<.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，它将打开具有相同索引的TAB。 但那是包含纪录片电影的TAB！ 因为它仍然具有索引号3！

要解决这个新问题，您必须搜索具有此索引号但-1的选项卡。
（戏剧索引（3）-1 = 打开戏剧选项卡索引（2））

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

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

});

有了这个想法，你只需要使用jQuery的:visible选择器来.fadeOut()所有先前打开的选项卡。例如：

$('.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); 看起来更漂亮！ :)

- Roko C. Buljan

---

roXon，我需要在所有显示的类型的第一个ul下隐藏每个新类型的第一个ul。我相信我可以将此事件链接到第一个if语句下，但我不是完全确定。 - arkjoseph

我已经在这里更新了我的演示： http://jsfiddle.net/arkjoseph/5wXpE/2/目前，它会在我点击后隐藏所有第一列标题。我需要它在加载时隐藏所有列标题，除了第一个。类似于index()-1。隐藏除第一个之外的所有first-child ul。 - arkjoseph

是的，它运行得非常好。我被要求在查看全部时添加按字母排序的功能。目前，列表根据流派进行排序，而不管是否全部查看。有什么建议吗？ - arkjoseph

你能创建一个新问题吗？这里有点混乱。谢谢! :) - Roko C. Buljan

我的新问题与排序能力有关。https://dev59.com/l1rUa4cB1Zd3GeqPm8Fr - arkjoseph