我在这段代码中遇到了两个问题。首先,当点击时,span 标签的颜色没有变成白色。只发生一次,我希望当我点击页面的任何地方时,图标和颜色都回到第一阶段,也就是它们被点击之前,变成星号和黑色。
$(".btn_body").click(function () {
$(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "white" );
$(this).find('span').css('color', 'white');
if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
$(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
$(this).find('span').css('color', 'black');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="panel-body" id="myform">
<div class="body-title">title</div>
<div class="form-group">
<div class="col-md-16">
<button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown" aria-expanded="false"> <span id="users_label">users</span><i class="glyphicon glyphicon-asterisk"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-md-16">
<button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown"> <span id="clients_label">clients</span>
<i class="glyphicon glyphicon-asterisk"></i>
</div>
</div>
</div>