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>

希望这会对你有所帮助。

数据切换图像更改

1 个答案: