Question

我的应用程序中手风琴有问题。我使用引导程序和纯CSS。当手风琴打开时，箭头需要向上，当手风琴闭合时，箭头需要向下。但是所有的时间都是向上箭头。

请帮帮我。

这是我的代码

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="toggle-img" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Title 1 <span></span></a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="toggle-img" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Title 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="toggle-img" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
       Title 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>

.toggle-img span {
 background: url(arrow_up.png) no-repeat;
  display: inline-block;
  float: right;
  height: 9px;
  width: 21px;
  background-repeat: no-repeat;
}

#accordion .collapsed span {
  background: url(arrow_down.png) no-repeat !important;
  display: inline-block;
  float: right;
  height: 9px;
  width: 21px;
  background-repeat: no-repeat;
}
</style>

Answer 1

有一个<div>没关闭，但是我看到的最大问题是“折叠”类。如果默认情况下将此类添加到所有toggle-img（因为所有手风琴在我第一次访问该页面时均已关闭），则向上和向下箭头效果很好。在我的示例中，我使用了颜色：红色=向上箭头/绿色=向下箭头

.toggle-img span {
  /*background-image: url("up.jpg");*/
  background-color:#00ff00;
  display: inline-block;
  float: right;
  height: 29px;
  width: 21px;
  background-repeat: no-repeat;
}

#accordion .collapsed span {
  /*background-image: url("down.jpg");*/
  background-color:#ff0000;
  display: inline-block;
  float: right;
  height:29px;
  width: 21px;
  background-repeat: no-repeat;
}

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="toggle-img collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Title 1 <span></span></a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="toggle-img collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Title 2<span></span></a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="toggle-img collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
       Title 3<span></span></a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div>

带图像的Bootstrap手风琴

1 个答案: