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

Question

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

基本上我的html没有表现出我想要的方式。

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

<div class="slide">

动作冒险 - 显示

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

戏剧 - 显示

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

等等...

已修复 在初始加载时，加载所有容器当前仅在首次加载时起作用。在我单击另一种流派后，然后返回“全部”，它似乎表现得很奇怪，只显示所有其他流派

这里有新演示

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

演示在这里

谢谢大家！

ps，还有其他jquery来隐藏第n个孩子。忽略它即可。

感谢您的帮助！

我需要帮助的最后一件事是当所有第一个子 ul 都可见时隐藏所有第一个子 ul。除了动作冒险类的第一个之外。

Answer 1

此处：

工作演示

带注释的演示

这里我们使用被点击的li的.index()编号- 打开一个 :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 的选项卡。
( 戏剧索引(3)-1 = 打开戏剧选项卡索引(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); 看起来更漂亮！ :)

Answer 2

这并不能完全回答您的问题，但请务必在执行淡出之类的操作之前停止排队的动画：

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

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