.toggleClass ('active') wird nicht entfernt, wenn auf den anderen Link geklickt wird

Question

Ich versuche, ein ziemlich einfaches slideToggle zu machen, sowie toggleClass ('active'). Es funktioniert derzeit auf sich selbst (Umschalten aktiv), aber es wird nicht aktiv, wenn ich auf einen anderen Link klicke. Ich weiß, dass mir etwas ziemlich Einfaches fehlt und ich mich frage, was es ist. Irgendwelche Vorschläge?

 $('.content').hide(); 
 
     $('.expander').click(function(x) { 
 
     $(this).toggleClass('active'); 
 
      var toggle = $(this).nextUntil('.expander'); 
 
      toggle.slideToggle(); 
 
     $('.content').not(toggle).slideUp(); 
 
     x.preventDefault(); 
 
     });

.expander {background: red; width: 100%; padding: 10px; display: block; margin-bottom: 10px; text-decoration: none;} 
 
.expander.active {background: black;} 
 
.content {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
     <a class="expander" href="#">Link 1</a> 
 
     <div class="content"> 
 
     <ul class="list"> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
      <li>4</li> 
 
      <li>5</li> 
 
     </ul> 
 
     </div> 
 

 
    <a class="expander" href="#">Link 2</a> 
 
     <div class="content"> 
 
     <ul class="list"> 
 
      <li>6</li> 
 
      <li>7</li> 
 
      <li>8</li> 
 
      <li>9</li> 
 
      <li>10</li> 
 
     </ul> 
 
     </div> 
 

 
    <a class="expander" href="#">Link 3</a> 
 
     <div class="content"> 
 
     <ul class="list"> 
 
      <li>11</li> 
 
      <li>12</li> 
 
      <li>13</li> 
 
      <li>14</li> 
 
      <li>15</li> 
 
     </ul> 
 
     </div>

Answer 1

Sie müssen nur Klasse entfernen active von allen Elementen mit Klasse expander, bevor Sie wechseln. Überprüfen Sie außerdem, ob eine Klasse active damit verknüpft ist, um ein aktives Element einzuschalten.

$('.content').hide(); 
    $('.expander').click(function(x) { 
    var toggleClass = $(this).hasClass('active') ? true : false; 
    $('.expander').removeClass('active');  
    if(!toggleClass) 
     $(this).toggleClass('active');   
    var toggle = $(this).nextUntil('.expander'); 
    toggle.slideToggle(); 
    $('.content').not(toggle).slideUp(); 
    x.preventDefault(); 
    }); 

Beispiel: https://jsfiddle.net/98vbmryj/2/

Answer 2

Hier ist ein Motto.

$('.expander').click(function(x) { 
    $(this).addClass('active').next('.content').slideDown().prev('.expander').siblings('.expander').removeClass('active').next('.content').slideUp(); 
}); 

Demo:

//$('.content').hide(); 
 
$('.expander').click(function(x) { 
 
$(this).addClass('active').next('.content').slideDown().prev('.expander').siblings('.expander').removeClass('active').next('.content').slideUp(); 
 
});

.expander { 
 
    background: red; 
 
    width: 100%; 
 
    padding: 10px; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    text-decoration: none; 
 
} 
 
.expander.active { 
 
    background: black; 
 
} 
 
.content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a class="expander" href="#">Link 1</a> 
 
<div class="content"> 
 
    <ul class="list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div> 
 

 
<a class="expander" href="#">Link 2</a> 
 
<div class="content"> 
 
    <ul class="list"> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    </ul> 
 
</div> 
 

 
<a class="expander" href="#">Link 3</a> 
 
<div class="content"> 
 
    <ul class="list"> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
    <li>14</li> 
 
    <li>15</li> 
 
    </ul> 
 
</div>