0
votes

jQuery affiche / masque plusieurs divs

J'ai besoin d'aide pour développer / réduire le div à l'aide de jQuery. Voici le problème.

J'ai une page HTML indiquant les noms des voitures et leur description, comme indiqué ci-dessous.

Lorsque l'utilisateur clique sur un div carTitle, le div carDetail correspondant doit être développé (s'il est déjà réduit). Lorsque l'utilisateur clique à nouveau sur ce div, le div carDetail correspondant doit être réduit.
Initialement, carToyota div doit être développé sur pageLoad, et les autres divs sont réduits
L'utilisateur peut conserver plusieurs divs développés en même temps

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  if (collapsed == true) {
    $(carDetailsDiv).hide();
  } else {
    $(carDetailsDiv).show();
  }

  event.preventDefault();
  return false;
});

Le code ci-dessus ne fonctionne pas comme prévu. Quelqu'un peut-il aider ??

javascript jquery html css

0 commentaires

3 Réponses :

3
votes

Définissez votre propre classe appelée collapsed , et définissez-la sur display: none

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Ensuite, vous pouvez utiliser jQuery .toggleClass () pour basculer cette classe, tout en pouvant simplement ajouter la classe aux divs carDetails pour les masquer par défaut

Enfin, vous pouvez utiliser $ (this) .next () , plutôt que event.currentTarget.next ()

Voici la démo:

.collapsed {
  display: none;
}

$(".carTitle").on('click', function(e) {
  $(this).next().toggleClass('collapsed');
});

collapsed {
  display: none;
}

2 commentaires

.toggleClass () est la solution la plus propre

Pas de soucis, content de pouvoir aider. Aussi, si cette réponse vous a aidé, pourriez-vous la marquer comme acceptée - Cela vous récompensera ainsi que moi avec une certaine réputation et marquera votre question comme résolue. Comment l'acceptation d'une réponse fonctionne

0
votes

Par défaut, gardez toutes les div .carDetails cachées.

Gardez la classe ouverte sur la première division de voiture.

Supprimer / Ajouter .open sur la classe carDetails sur laquelle l'utilisateur a cliqué.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails open">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

.carDetails {
  display: none;
}

.carDetails.open {
  display: block;
}

$(".carTitle").on('click', function(e) {
  var carDetailsDiv = $(event.currentTarget).next();
  if ($(carDetailsDiv).hasClass('open')) {
    $(carDetailsDiv).removeClass('open');
  } else {
    $(carDetailsDiv).addClass('open');
  }

  event.preventDefault();
  return false;
});

0 commentaires

0
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails show">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

.carDetails {display:none;}
.show {display:block;}

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  $(this).siblings('.carDetails').toggleClass('show');

  event.preventDefault();
  return false;
});

Essayez celui-ci que j'ai en utilisant toggle class dans votre description div ....

0 commentaires