jQuery顯示/隱藏 - 添加/刪除.active類

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>