当我单击某个特定按钮时，我想隐藏所有其他按钮<div>s.
$(document).ready(function() {
$(".show").click(function() {
$(this).prev().toggle();
});
});
$(document).ready(function() {
$(".show").click(function() {
$(".fichier").toggle();
});
});
$(document).ready(function() {
$(".show2").click(function() {
$(".fichier2").toggle();
});
});
$(document).ready(function() {
$(".show3").click(function() {
$(".fichier3").toggle();
});
});
$(document).ready(function() {
$(".show4").click(function() {
$(".fichier4").toggle();
});
});
.fichier {
display: none;
position: absolute;
height: 100%;
width: 100%;
}
.fichier2 {
display: none;
position: absolute;
height: 100%;
width: 100%;
}
.fichier3 {
display: none;
position: absolute;
height: 100%;
width: 100%;
}
.fichier4 {
display: none;
position: absolute;
height: 100%;
width: 100%;
}
.poz1 {
position: absolute;
width: 50%;
height: 64px;
overflow-x: scroll;
bottom: 0;
right: 0;
}
.btna {
width: 19%;
height: 50px;
}
.droite1 {
background: purple;
float: right;
width: 50%;
height: 100%;
}
.gauche1 {
background: orangered;
float: left;
width: 50%;
height: 100%;
}
.droite2 {
background: rgb(8, 223, 90);
float: right;
width: 50%;
height: 100%;
}
.gauche2 {
background: rgb(74, 11, 190);
float: left;
width: 50%;
height: 100%;
}
.droite3 {
background: blue;
float: right;
width: 50%;
height: 100%;
}
.gauche3 {
background: rgb(74, 11, 190);
float: left;
width: 50%;
height: 100%;
}
.droite4 {
background: rgb(8, 223, 90);
float: right;
width: 50%;
height: 100%;
}
.gauche4 {
background: rgb(74, 11, 190);
float: left;
width: 50%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="fichier">
<div class="droite1">droite</div>
<div class="gauche1">gauche</div>
</div>
<div class="fichier2">
<div class="droite2">droite</div>
<div class="gauche2">gauche</div>
</div>
<div class="fichier3">
<div class="droite3">droite</div>
<div class="gauche3">gauche</div>
</div>
<div class="fichier4">
<div class="droite4">droite</div>
<div class="gauche4">gauche</div>
</div>
<div class="poz1">
<button class="show btna poz2">arme 2</button>
<button class="show2 btna poz2">arme 1</button>
<button class="show3 btna poz2">arme 1</button>
<button class="show4 btna poz2">arme 1</button>
<button class="show5 btna poz2">arme 1</button>
<button class="show6 btna poz2">arme 1</button>
<button class="show7 btna poz2">arme 1</button>
</div>
希望当我点击 1 个按钮时关闭其他 div 打开
希望一次只打开 1 个 div
我还有 21 个按钮要添加。每次我点击按钮时我想关闭上一个按钮
你想要这样的东西吗？
您不需要向每个单独的 div 添加点击处理程序。
只需获取单击的按钮的索引并显示具有该索引的 div 即可。
$(document).ready(function() {
$(".poz button").click(function() {
var i = $(this).index();
$(".fichier").hide();
$(".fichier").eq(i).show();
});
});
.fichier {
display: none;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.poz {
position: absolute;
width: 50%;
height: 64px;
overflow-x: scroll;
bottom: 0;
right: 0;
}
.btna {
width: 19%;
height: 50px;
}
.droite {
background: purple;
float: right;
width: 50%;
height: 100%;
}
.gauche {
background: orangered;
float: left;
width: 50%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fichiers">
<div class="fichier">
<div class="droite">droite1</div>
<div class="gauche">gauche1</div>
</div>
<div class="fichier">
<div class="droite">droite2</div>
<div class="gauche">gauche2</div>
</div>
<div class="fichier">
<div class="droite">droite3</div>
<div class="gauche">gauche3</div>
</div>
<div class="fichier">
<div class="droite">droite4</div>
<div class="gauche">gauche4</div>
</div>
</div>
<div class="poz">
<button class="btna">arme 1</button>
<button class="btna">arme 2</button>
<button class="btna">arme 3</button>
<button class="btna">arme 4</button>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
