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>