Dans l'exemple suivant, les 3 divs de la classe ".container2" sont masqués par défaut. Lorsque je clique sur un h2, le div à côté s'ouvre (ce qui se produit) mais quand je clique à nouveau sur le h2, le div ne se ferme pas mais reste ouvert. S'il vous plaît, aidez-moi pourquoi il ne bascule pas?

Exemple:

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  * {margin:0px;padding:0px;}
  h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
  .container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>

<script>
  $(document).ready(function(){
    $('.container2').hide();

    $('h2').click(function(){
      $('.container2').hide();
      $(this).next().toggle();
  });
});
</script>

</head>

<body>

<h2>Set-I</h2>
<div class="container2">123</div>

<h2>Set-II</h2>
<div class="container2">456</div>

<h2>Set-III</h2>
<div class="container2">789</div>

</body>

</html>

REMARQUE: à la fois, je ne souhaite ouvrir que 1 div maximum. Si je retire $('.container2').hide(), plus de 1 division peut s'ouvrir à la fois, ce que je ne veux pas!

0
Deadpool 20 nov. 2018 à 10:59

3 réponses

Meilleure réponse

Masquer tout sauf l'actuel basculé

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  * {margin:0px;padding:0px;}
  h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
  .container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>

<script>
  $(document).ready(function(){
    $('.container2').hide();

    $('h2').click(function(){
      var container2 = $(this).next();
      $('.container2').not(container2).hide();
      container2.toggle();
  });
});
</script>

</head>

<body>

<h2>Set-I</h2>
<div class="container2">123</div>

<h2>Set-II</h2>
<div class="container2">456</div>

<h2>Set-III</h2>
<div class="container2">789</div>

</body>

</html>
2
madalinivascu 20 nov. 2018 à 08:07

Vous avez besoin de cette ligne:

$('.container2:visible').not($(this).next()).hide();

Cette modification fera le comportement prévu.

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    h2 {
      background: #000;
      color: #fff;
      margin: 10px;
      border-radius: 4px;
      padding: 5px 10px;
    }
    
    .container2 {
      background: yellow;
      color: #000;
      margin: 0px 10px;
      padding: 2px 10px;
    }
  </style>

  <script>
    $(document).ready(function() {
      $('.container2').hide();

      $('h2').click(function() {
        $('.container2:visible').not($(this).next()).hide();
        $(this).next().toggle();
      });
    });
  </script>

</head>

<body>

  <h2>Set-I</h2>
  <div class="container2">123</div>

  <h2>Set-II</h2>
  <div class="container2">456</div>

  <h2>Set-III</h2>
  <div class="container2">789</div>

</body>

</html>
3
Jai 20 nov. 2018 à 08:09

Vous devrez le faire en deux étapes.

Étape 1: masquer toutes les div h2.

Étape 2: basculer uniquement la division next() h2 actuelle.

Et vous devriez le faire avec une fonction de rappel passée à .hide() pour garantir qu'elle ne sera exécutée qu'après que la fonction aura fini de cacher les autres divs.

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  * {margin:0px;padding:0px;}
  h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
  .container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>

<script>
  $(document).ready(function(){
    $('.container2').hide();

    $('h2').click(function(){
      
      var btn = $(this).next();
      $('.container2').hide(function(){
          btn.toggle();
      });
      
  });
});
</script>

</head>

<body>

<h2>Set-I</h2>
<div class="container2">123</div>

<h2>Set-II</h2>
<div class="container2">456</div>

<h2>Set-III</h2>
<div class="container2">789</div>

</body>

</html>
1
Ahmad 20 nov. 2018 à 08:06