javascript - 数据切换图像变化

Question

<a href="#demo1"  data-toggle="collapse"><h3 style="color:#0F77CD;">Form</h3></a>
<div id="demo1" class="collapse">
  <asp:CheckBox ID="CheckBox1" runat="server" Text="Capsules" /><br /><br />
  <asp:CheckBox ID="CheckBox6" runat="server" Text="Combo Pack" /><br /><br />
  <asp:CheckBox ID="CheckBox7" runat="server" Text="Kit" /><br /><br />
  <asp:CheckBox ID="CheckBox8" runat="server" Text="Gel" /><br /><br />
</div>

上面的代码是在 div 之间切换，我需要的是添加切换图像，如减号和加号。当切换展开时，它应该显示减号图标，如果折叠它应该显示加号图标。

Answer 1

这里是一个使用 bootstrap v3 的解决方案 https://jsfiddle.net/tyrt75q6/1/

$('a').click(function(){
  if($(this).find('i').hasClass('fa-plus')){
    $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
  } else {
    $(this).find('i').removeClass('fa-minus').addClass('fa-plus');
  }
});

h3 {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#demo1"  data-toggle="collapse">
  <i class="fa fa-plus" aria-hidden="true"></i>
  <h3 style="color:#0F77CD;">Form</h3> 
</a>
<div id="demo1" class="collapse">
  <input type="checkbox" ID="CheckBox1" runat="server" Text="Capsules" /><br /><br />
  <input type="checkbox" ID="CheckBox6" runat="server" Text="Combo Pack" /><br /><br />
  <input type="checkbox" ID="CheckBox7" runat="server" Text="Kit" /><br /><br />
  <input type="checkbox" ID="CheckBox8" runat="server" Text="Gel" /><br /><br />
</div>

希望对您有所帮助。