例如,您有三个按钮。根据您选择的按钮,一个 div 将出现在其下方,并带有另一个按钮子集,并继续这样。当你点击一个按钮时,它会变成黄色,并且一个“selected”类会出现在那个按钮上。但是可以说我已经加载了 div 1、div 2、div 3 和 div 4。但是我在 div 2 上选择了一个不同的按钮。我希望 div 4 消失并且基本上“重置”,并且 div 3 按钮的选择重置(就像在选择类中消失一样)。
下图:假设 btn 1 和 btn 4 被选中(黄色),div 2 和 div 3 现在已加载。但我现在选择 btn 2,所以 selected(yellow) 显示在 btn 2 上,而不是 btn 1。我需要 div 3 消失,div 2 重置,没有任何“选定”类。本质上重置 div 2(您选择的按钮下方的 div 以及下方的所有 div。)
我希望这更有意义。让我知道是否需要进一步澄清。
HTML 示例
$(".div2, .div3, .div4, .div5").hide();
$('.btn1, .btn2, .btn3 ').click(function() {
$('.div2').fadeIn("slow");
$(this).addClass('selected').siblings().removeClass('selected');
});
$('.btn4, .btn5, .btn6 ').click(function() {
$('.div3').fadeIn("slow");
$(this).addClass('selected').siblings().removeClass('selected');
});
$('.btn7, .btn8, .btn9 ').click(function() {
$('.div4').fadeIn("slow");
$(this).addClass('selected').siblings().removeClass('selected');
});
$('.btn10, .btn11, .btn12 ').click(function() {
$('.div5').fadeIn("slow");
$(this).addClass('selected').siblings().removeClass('selected');
});
.btn {
color:grey;
}
.selected {
color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12 div1">
<button class="btn1 btn"><label for="btn1">Btn1</label></button>
<button class="btn2 btn"><label for="btn2">Btn2</label></button>
<button class="btn3 btn"><label for="btn3">Btn3</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div2">
<button class="btn4 btn"><label for="btn4">Btn4</label></button>
<button class="btn5 btn"><label for="btn5">Btn5</label></button>
<button class="btn6 btn"><label for="btn6">Btn6</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div3">
<button class="btn7 btn"><label for="btn7">Btn7</label></button>
<button class="btn8 btn"><label for="btn8">Btn8</label></button>
<button class="btn9 btn"><label for="btn9">Btn9</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div4">
<button class="btn10 btn"><label for="btn10">Btn10</label></button>
<button class="btn11 btn"><label for="btn11">Btn11</label></button>
<button class="btn12 btn"><label for="btn12">Btn12</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div5"></div>
</div>
最佳答案
您需要转到 .row
,然后使用 nextAll
获取其他 .row
。然后找到要隐藏的 div
,然后找到其中的 button
以删除类。
然后做类似的事情来显示 next
div。
$(".div2, .div3, .div4, .div5").hide();
$('button').click(function(){
$(this).addClass('selected').siblings().removeClass();
$(this).closest('.row').nextAll('.row').find('div').hide().find('button').removeClass('selected');
$(this).closest('.row').next('.row').find('div').show();
});
.btn {
color:grey;
}
.selected {
color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12 div1">
<button class="btn1 btn"><label for="btn1">Btn1</label></button>
<button class="btn2 btn"><label for="btn2">Btn2</label></button>
<button class="btn3 btn"><label for="btn3">Btn3</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div2">
<button class="btn4 btn"><label for="btn4">Btn4</label></button>
<button class="btn5 btn"><label for="btn5">Btn5</label></button>
<button class="btn6 btn"><label for="btn6">Btn6</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div3">
<button class="btn7 btn"><label for="btn7">Btn7</label></button>
<button class="btn8 btn"><label for="btn8">Btn8</label></button>
<button class="btn9 btn"><label for="btn9">Btn9</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div4">
<button class="btn10 btn"><label for="btn10">Btn10</label></button>
<button class="btn11 btn"><label for="btn11">Btn11</label></button>
<button class="btn12 btn"><label for="btn12">Btn12</label></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 div5"></div>
</div>
关于javascript - 在按钮选择下方隐藏和显示 div + 类更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34594093/