改变扩展和崩溃的图标

Question

因此，我有一个侧栏菜单，我试图允许用户浏览所有类似于树的类别。我面临菜单扩展和崩溃的问题。我希望在菜单展开时成为图标expand图标。HTML不允许使用语句，因为它不是编程语言。我该如何执行任务？

这是我的代码

.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＆amp;这里一个示例：

<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>

---

2. 然后，我只需要在fa-angle-down＆amp的类之间切换fa-angle-up单击它时，使用此 jQuery 代码：

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

---

3. 这是您可以运行的演示：

单击链接上的箭头，因为我不知道为什么您的链接 不起作用，但是当您点击点击时，您会得到 预期效果！

$(".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>

Answer 2

您可以使用 jQuery ，因为您已经包含它。

html：

<!-- add on onclick JS function and pass the img element to it -->
<img onclick="changeIcon(this);" src="images/icon-expand.png" data-toggle="collapse" href="#collapse1"><a .... 

。

JS：

<script>
function changeIcon(theImage)
{
  var expand = 'images/icon-expand.png';
  var collapse = 'images/icon-collapse.png';
  var thePic = $(theImage).attr('src'); // use jQuery to get the current image
  // now set the src attribute according to its current state
  if(thePic==expand){ $(theImage).attr('src',collapse); }
  if(thePic==collapse){ $(theImage).attr('src', expand); }
}
</script>

希望这对您有用：）

Answer 3

您可以使用jQuery的toggleclass或使用Vanilla JS实现类似的行为。