我想做的就是:
- 有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();
}
}
最佳答案
尝试
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
关于javascript - slideUp() 所有元素但不包括被选元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18396935/