jquery - 更改展开和折叠的图标

Question

所以我有一个侧栏菜单，我试图在其中允许用户浏览所有类别，这是一个像 structure 这样的树。 。我面临菜单扩展和折叠的问题。我希望当菜单展开时，图标展开图标变成图标折叠图标。HTML 不允许 if 语句，因为它不是一种编程语言。我该如何执行任务？

这是我的代码

.coll { background-image: url("images/icon-collapse.png"); }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>

<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFnIdc-Cqv0YKz7_fKBSJhgqp-VaBtSK0yfmPZn7pBVuMr07zM" data-toggle="collapse" href="#collapse1" class="collapsed" aria-expanded="false" style="
    width: 27px;
"><a href="audits-inspections-surveys.php">Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
  </div>
  </div>
  <div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <span class="coll" data-toggle="collapse" href="#collapse2"></span><a href="audits-inspections-surveys.php">Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
    </div>
   </div>
   </div>
    </div>

Answer 1

在线图标

首先，我邀请您不要使用图像来添加图标，而是使用网络图标，例如:Fontawesome/Glyphicon ;

使用这些图标非常容易，在本例中我将使用 Fontawesome & 这里是 example :

<script src="https://use.fontawesome.com/c6435311fd.js"></script>
<i class="fa fa-angle-down"></i>

<小时/>

您的问题

现在我们将回到您的问题:

1. 代替此代码

   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFnIdc-Cqv0YKz7_fKBSJhgqp-VaBtSK0yfmPZn7pBVuMr07zM" datatoggle="collapse"href="#collapse1" class="collapsed" aria-expanded="false" style="width: 27px;"/>

我会用这个:

<i class="fa fa-angle-down" data-toggle="collapse" href="#collapse1" class="collapsed" aria-expanded="false"></i>

<小时/>

然后我只需在类(class)之间切换 fa-angle-down & fa-angle-up当您单击它时，使用以下 jQuery 代码:

$(".fa").on("click",function(){
$(this).toggleClass("fa-angle-down");
$(this).toggleClass("fa-angle-up");
});

<小时/>

以下是您可以运行的演示:

Click on the arrow not on the link, cause i don't know why your link is not working, but when you click on the click you'll get the expected effect !

$(".fa").on("click",function(){
$(this).toggleClass("fa-angle-down");
$(this).toggleClass("fa-angle-up");
});

.coll { background-image: url("images/icon-collapse.png"); }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<script src="https://use.fontawesome.com/c6435311fd.js"></script>

<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
     <a href="audits-inspections-surveys.php"><i class="fa fa-angle-down" data-toggle="collapse" href="#collapse1" class="collapsed" aria-expanded="false"></i>Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
  </div>
  </div>
  <div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <span class="coll" data-toggle="collapse" href="#collapse2"></span><a href="audits-inspections-surveys.php">Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
    </div>
   </div>
   </div>
    </div>