我的jquery菜单不想正常工作

时间:2012-11-02 16:46:10

标签: jquery menu tabs

我正在为学校制作标签菜单。但我正在与我的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.
    });
});
});

2 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

这是你需要的吗?

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