jQuery toggle() ，按钮我想点击 1 按钮并隐藏所有其他 div

Question

当我点击一个特定的按钮时，我想隐藏所有其他的 <div>

$(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 个按钮。每次我点击按钮时我都想关闭上一个按钮

Answer 1

你想要这样的东西吗？您不需要为每个单独的 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>