Question

我正在为学校制作标签菜单。但我正在与我的Jquery斗争。我对菜单的想法是打开一个标签，让文本块滚出来工作正常但是当我想打开另一个标签时，它会在我按下之后立即恢复。因为tab1是唯一有效的，我只是不知道如何解决它。如果有人能提供帮助我真的很感激。问题出在这个J查询块中。

我的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.
    });
});
});

Answer 1

首先，这是在脚本的末尾，因此在完成所有操作后，文本块关闭。

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

单击tab1时未发生这种情况的原因是上述动画未绑定到tab1

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

Answer 2

这是你需要的吗？

DEMO：http://jsfiddle.net/6dwvs/19/

我将点击限制在类而不是ID上。看看它对你有意义。

JS

$(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 元素等等。

我的jquery菜单不想正常工作

2 个答案: