我的 jquery 菜单不想正常工作答案

【问题标题】：My jquery menu doesn't want to work properly我的 jquery 菜单不想正常工作
【发布时间】：2012-11-02 16:46:10
【问题描述】：

我正在为学校制作一个标签菜单。但我正在为我的 Jquery 苦苦挣扎。我对菜单的想法是打开一个选项卡并让文本块展开，它工作正常，但是当我想打开另一个选项卡时，它会在我按下它后立即恢复。因为 tab1 是唯一有效的，我只是不知道如何修复它。如果有人可以提供帮助，我将不胜感激。问题出在这个 J-query 块中。

我的 jsfiddle：http://jsfiddle.net/6dwvs/embedded/result/

$('#tab4, #tab3, #tab2,').click(function() {
    $('#tab4, #tab3, #tab2, #tab1').animate({
        height: '100px',
     }, 0, function() {
        // Animation complete.

    });
    $('#textblok1,#textblok2,#textblok3,#textblok4').animate({
        height: '0px',
    }, 0, function() {
        // Animation complete.
    });
});
});

【问题讨论】：

你能不能创建一个jsfiddle.net 来演示这个问题。
你能再解释一下吗？当用户单击一个选项卡时，单击的选项卡是否应该打开而其他选项卡关闭？文本块呢？
另外，标签页中的文本块 html 是 html 吗？
@videsignz 如果开始页面，文本块已关闭并且第一个选项卡已连接，如果我想打开另一个选项卡，我必须单击它直到那里工作正常。因为文本块 1 上升，选项卡 1 上升，然后选项卡 2 和文本块 2 下降，但不会保持下降，它们会立即上升。
我想发布我的完整 jquery。但是stackoverflow不允许我这样做。所以我不得不剪掉另一部分。

标签： jquery menu tabs

【解决方案1】：

首先，这是在脚本的结尾，所以说完之后，文本块关闭了。

$('#textblok1,#textblok2,#textblok3,#textblok4').animate({
    height: '0px',
}, 0, function() {
    // Animation complete.
});

点击tab1时没有发生的原因是因为上面的动画没有绑定到tab1

$('#tab4, #tab3, #tab2, *MISSING TAB1* ').click(function() {

【讨论】：

【解决方案2】：

这是你需要的吗？

在这里演示：http://jsfiddle.net/6dwvs/19/

我将点击绑定到类而不是 ID。看看它对你是否有意义。

$(document).ready(function() {
    $('.tabs').each(function(index) {
        $(this).click(function(event){
            $('.tabs').css('height','100px');
            $('.blocks').css('height','0px');
            $(this).animate({height: '110px'}, 200);
            $('.blocks').eq(index).animate({height: '500px'}, 2500);
        });
    });
});

编辑：对JS稍作修改+说明如下：

标签和块的数量相同。所以我通过.eq(index) 将第一个标签绑定到第一个块。对于特定的标签索引，相同的索引会被动画化。

如果 index = 0，.eq(index) 以所选元素列表中的 第一个 元素为目标，对于 index = 1，second 元素等等...

【讨论】：

@Pulkit 你能给我解释一下.eq(index)吗？