Question

首先发布在这里。我正在学习jQuery并且已经创建了一个固定的菜单，可以在点击时弹出并滚动DIV。我真的想提高我的jQuery知识，并且我重复了很多代码来完成这项工作。

我正在寻求帮助，所以我可以在菜单中添加无限量的DIV，它仍会点击它们。任何帮助将不胜感激！

这是一个链接：http://jsfiddle.net/arbitel/peLkn/

$(document).ready(function () {
$('.menubody:nth-child(1)').show('slow');
$('.menubody:nth-child(1)').hide('slow');

$('.floatingbarbutton').on({
    click: function () {
        if ($('.menubody:nth-child(2)').css('display') == 'block') {
            $('.menubody').hide('slow')
        } else if ($('.menubody:nth-child(3)').css('display') == 'block') {
            $('.menubody').hide('slow')
        } else if ($('.menubody').css('display') == 'none') {
            $('.menubody:nth-child(1)').show('slow')
        } else {
            $('.menubody').hide('slow')
        }
    }
});
$('.downarrow').on({
    click: function () {
        if ($('.menubody:nth-child(1)').css('display') == 'block') {
            $('.menubody:nth-child(1)').css('display', 'none')
            $('.menubody:nth-child(2)').css('display', 'block')
        } else if ($('.menubody:nth-child(2)').css('display') == 'block') {
            $('.menubody:nth-child(2)').css('display', 'none')
            $('.menubody:nth-child(3)').css('display', 'block')
        } else if ($('.menubody:nth-child(3)').css('display') == 'block') {
            $('.menubody:nth-child(3)').css('display', 'none')
            $('.menubody:nth-child(1)').css('display', 'block')
        }

    }
});
});

Answer 1

尝试：

$('.floatingbarbutton').on({
    click: function () {
        if($('.menubody').is(':visible')){
            $('.menubody').hide('slow');//if menu is visible then hide
        }
        else{
            $('.menubody:eq(0)').show('slow');//if menu is hidden then show first
        }
    }
});
$('.downarrow').on({
    click: function () {
        var i = $('.menubody:visible').index();
        var len = $('.menubody').length;
        var next;
        if(i >= 0){
            if(i == len-1){
                next = $('.menubody:eq(0)');//if last menu is visible then show first
            }
            else{
                next = $('.menubody:eq('+(i+1)+')');//show next menu otherwise 
            }
            $('.menubody:visible').hide();
            $(next).show();
        }
    }
});

Updated fiddle here.

Answer 2

我在这个jsfiddle

更新了你的downarrow代码的脚本

var curDiv = 1;
var divCount = $(".menubody").length;
$('.downarrow').click(function () {
    $(".menubody:nth-child("+curDiv+")").hide();
    curDiv++;
    if (curDiv>divCount) { curDiv=1;}
    $(".menubody:nth-child("+curDiv+")").show();
});

效率更高，可以处理无限数量的.menubody div。

单击更改隐藏/显示多个DIV

2 个答案: