.toggleClass（ 'アクティブ'）他のリンクがクリックされたときにアクティブを削除しないようにする

Question

toggleClass（ 'active'）だけでなく、かなり簡単にslideToggleを実行しようとしています。現在は自分自身で動作しています（アクティブに切り替える）が、別のリンクをクリックしてもアクティブではなくなりません。私はかなり単純なものを見逃していて、それが何であるか不思議であることを知っています。助言がありますか？

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

あなたはちょうどあなたが切り替える前に、クラスexpanderを持つすべての要素からクラスactiveを削除する必要があります。また、アクティブな要素を切り替えるには、クラスがactiveに関連付けられているかどうかを確認します。

$('.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(); 
    }); 

例：ここではhttps://jsfiddle.net/98vbmryj/2/

Answer 2

は1つのライナーです。

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

デモ：

//$('.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>

完璧な作品