menu déroulant jquery toggle items

Question

J'ai un problème avec un menu déroulant jQuery. Mon code :

$('.item-active, .item').click(function() { 
    $(this).toggleClass('item-active');
    if($('h3').hasClass('item-active')) {
        $(this).siblings().css( 'display', 'block' );       
    }   

    $(this).toggleClass('item');    
    if($('h3').hasClass('item')) {
        $(this).siblings().css( 'display', 'none' );    
    }
});

<div>
    <h3 class="item-active">item 1</h3>
    <div class="item-desc">Lorem Lorem</div>
</div>
<div>
    <h3 class="item">item 2</h3>
    <div class="item-desc">Lorem Lorem</div>
</div>
<div>
    <h3 class="item">item 3</h3>
    <div class="item-desc">Lorem Lorem</div>
</div>

Tout ce dont j'ai besoin, c'est de faire basculer le menu lorsque l'élément associé h3 est cliqué. En outre, un seul élément peut être actif en même temps (les autres descriptions doivent être masquées).

Answer 1

Pour résoudre ce problème, vous pouvez simplement utiliser removeClass() pour retirer le .item-active de tous les éléments avant de la faire basculer sur celui qui a été cliqué.

Notez également que vous pouvez simplifier le code JS en modifiant simplement la classe et en laissant le CSS masquer/afficher l'élément .item-desc en utilisant le + l'opérateur de la fratrie. Essayez ceci :

$('.item').click(function() {
  $('.item').not(this).removeClass('item-active');
  $(this).toggleClass('item-active');
});

.item-active {
  color: #C00;
}
.item-desc {
  display: none;
}
.item-active + .item-desc {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="item item-active">item 1</h3>
  <div class="item-desc">Lorem Lorem</div>
</div>
<div>
  <h3 class="item">item 2</h3>
  <div class="item-desc">Lorem Lorem</div>
</div>
<div>
  <h3 class="item">item 3</h3>
  <div class="item-desc">Lorem Lorem</div>
</div>