javascript - slideUp() 所有元素但不包括被选元素

Question

我想做的就是:

• 有7个数字和7个div，它们相互关联(nr 0与div 0有关系)
• 当点击其中一个数字时，它应该折叠所有其他未被选中的 div
• 可以一次多选

综上所述，基本上，页面有一些带有数字的标签和默认显示的 7 个 div(div)，但是当通过单击数字选择其中一个或多个时，页面应该仅显示所选的 div。

这是我一直在尝试做的事情:

for(var i = 0; i <= 6; i++) {     
            if(i != (floors[i])) {
                $("#lvl" + floors[i]).slideUp();
            }
        }

更多代码: http://jsfiddle.net/LSjg4/

Answer 1

尝试

var floors = [];

var $lvls = $('.lvl'), $nrs = $(".nr");
$nrs.click(function () {
    var $nr = $(this), index = $nrs.index($nr), $lvl = $lvls.eq(index);

    $lvl.add($nr).toggleClass('active');

    if($nr.hasClass('active')){
        $lvls.not('.active').slideUp();
        $lvl.slideDown();

        $nr.css("background-color", "#1b7664");
        $nr.css("border-color", "#236959");
        floors.push(($nr).text());
    } else {
        $nr.css("background-color", "#02c099");
        $nr.css("border-color", "#13a480");

        if($nrs.filter('.active').length == 0){
            $lvls.slideDown();
        } else {
            $lvls.not('.active').slideUp();
        }
        var text = $nr.text();
        floors.splice($.inArray(text, floors), 1);
    }

    console.log('floors', JSON.stringify(floors))
});

演示:Fiddle