jQuery表示/非表示 - アクティブなクラスの追加/削除

Question

これはおそらく何回か尋ねられましたが、少し苦労しています。誰かが助けることを願っています。 HTML &以下のjQueryは、divが開いているときにクラスに '.active'を追加し、閉じたときに.activeを削除したいだけです。

jQuery(function() { 
 
    jQuery('.expand').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var href = jQuery(this).attr("data-href"); 
 
    jQuery("#" + href).slideToggle('slow', function() { 
 

 
    }).siblings('div.expanded').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-lg-10"> 
 
    <strong>Short Description</strong> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
    <a data-href="one" href="#" class="expand btn btn-primary btn-sm">more...</a> &nbsp; 
 
    </div> 
 
</div> 
 
<div id="one" style="display: none;" class="expanded row"> 
 
    <strong>Long Description</strong> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-lg-10"> 
 
    <strong>Short Description</strong> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
    <a data-href="two" href="#" class="expand btn btn-primary btn-sm">more...</a> &nbsp; 
 
    </div> 
 
</div> 
 
<div id="two" style="display: none;" class="expanded row"> 
 
    <strong>Long Description</strong> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-lg-10"> 
 
    <strong>Short Description</strong> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
    <a data-href="three" href="#" class="expand btn btn-primary btn-sm">more...</a> &nbsp; 
 
    </div> 
 
</div> 
 
<div id="three" style="display: none;" class="expanded row"> 
 
    <strong>Long Description</strong> 
 
</div>

Answer 1

あなたが連続してクリックした要素にクラスを追加したり削除するtoggleClass()メソッドを使用することができますこれを行うにしてください。これを試してみてください：私はもう一度同じボタンをクリックした場合

jQuery(function($) { 
 
    jQuery('.expand').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var href = $(this).data("href"); 
 
    $("#" + href).slideToggle('slow').siblings('div.expanded').hide(); 
 
    $('.active').not(this).removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
    }); 
 
});

.expanded.row { display: none; } 
 
.active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-lg-10"> 
 
    <strong>Short Description</strong> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
    <a data-href="one" href="#" class="expand btn btn-primary btn-sm">more...</a> &nbsp; 
 
    </div> 
 
</div> 
 
<div id="one" class="expanded row"> 
 
    <strong>Long Description</strong> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-lg-10"> 
 
    <strong>Short Description</strong> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
    <a data-href="two" href="#" class="expand btn btn-primary btn-sm">more...</a> &nbsp; 
 
    </div> 
 
</div> 
 
<div id="two" class="expanded row"> 
 
    <strong>Long Description</strong> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-lg-10"> 
 
    <strong>Short Description</strong> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
    <a data-href="three" href="#" class="expand btn btn-primary btn-sm">more...</a> &nbsp; 
 
    </div> 
 
</div> 
 
<div id="three" class="expanded row"> 
 
    <strong>Long Description</strong> 
 
</div>