jQuery toggle()，我要单击1个按钮并隐藏所有其他div的按钮 [英] jQuery toggle() , button i want click on 1 button and hide all other div

问题描述

当我单击特定按钮时，我想隐藏所有其他<div>.

When I click on a particular button, I want to hide all other <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

wish when i click on 1 button is close other div open wish only 1 div open at time

我将再添加21个按钮.每次我单击按钮时，我想关闭上一个按钮

i will have 21 more button to add . and everytime i will click on button i want to close the prev button

推荐答案

您想要这样的东西吗? 您无需向每个div添加点击处理程序. 只需获得单击按钮的索引，然后显示具有该索引的div.

Do you want something like this? You don't need to add click handlers to each individual div. Just get the index of the button clicked and show the div with that index.

$(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>

这篇关于jQuery toggle()，我要单击1个按钮并隐藏所有其他div的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！