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＆amp; amp;这里是example：

＆＃13;

home indicator bar

＆＃13;

你的问题

现在我们回到你的问题：

而不是此代码

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

我会使用这个：

<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>＆amp;之间切换。 fa-angle-down点击它时，使用 jQuery 代码：

fa-angle-up

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

点击链接上没有的箭头，因为我不知道你链接的原因不起作用，但当你点击点击时你就会得到预期的效果！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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实现类似的行为。

更改扩展和崩溃的图标

3 个答案:

在线图标

你的问题