当手风琴 collapsed/expanded 时更改图像

Question

我一直在想办法解决这个问题，但我遇到的所有答案都不是我想做的。我的网站上有手风琴，您可以在这里找到 http://162.243.140.112/ 我有手风琴的以下 HTML：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne2">
      <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">  <img id="whtArrow" src="assets/white_open_arrow.png"> Ch. 7 - The Quick Debt-Free Option </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body"> Chapter 7, also called “liquidation” or “straight” bankruptcy, allows you to get rid of most debts and start over. It’s a good option for people who are struggling under the weight of unmanageable credit card or other personal debt. During your free consultation ask us if Chapter 7 is the right option for you. </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo2">
      <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <img id="whtArrow" src="assets/white_open_arrow.png"> Ch. 13 - The Repayment Option </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body"> If you have a steady income, but are overwhelmed by unmanageable bills and harassing creditors, Chapter 13 bankruptcy may be a good option for you. Once you file for Chapter 13, the collection calls will stop and you’ll be protected against foreclosure and repossession actions. Chapter 13 is one way to take charge of your finances and your future. </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree2">
      <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <img id="whtArrow" src="assets/white_open_arrow.png"> Ch. 11 - The Small Business Option </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body"> In today’s tough economic climate, even successful businesses can fall behind on taxes, payroll, vendor and utility expenses. You may think you have to sell your company, but it's not always the case. By filing a Chapter 11 bankruptcy, you can establish a debt repayment plan that will keep your business open and get you on your way to financial freedom. </div>
    </div>
  </div>
</div>

它工作正常，但我在面板标题文本之前有一个图像标签。我希望能够将标题文本之前的图像更改为不同的图像。将是向下或向右箭头。我根据找到的另一个答案尝试了这个 JavaScript 但没有找到任何成功。

$(document).ready(function () {
    var $content = $(".panel-body").hide();
    $(".panel-title").on("click", function (e) {
        document.getElementById("whtArrow").src="../assets/blue_phone.png"

    });
});

如果需要，这是我的CSS

.panel-wrapper {
    width: 100%;
    max-width: 588px;
    margin: 0 auto;
    margin-top: 100px;
}

.panel{
    background-color: transparent;
    border: none;
}

.panel-title img{
    margin: 10px 10px 10px 10px;
}

h4.panel-title i{
    padding:15px;
    margin: 10px 10px 10px 10px;
    color: #fff;
    border-radius: 50%;
}
h4.panel-title a{
    text-decoration: none;
    text-align: center;
    font-size: 18px;
}



h4.panel-title{
    font-family: 'Lato', sans-serif;
    line-height: 20px;
}

.panel-default > .panel-heading{
    padding: 0;
    height: 100%;
    width: 100%;
    background-position: 9px 9px;
    background-color:  #708198;
    color: #fff;
    border-radius: 50px;
    border: solid #fff 3px;
    margin-bottom: 10px;
}

.panel-default >.panel-heading+.panel-collapse>.panel-body {
    background: #d4d7dd;
    border-radius: 40px;
    margin-top: 0px;
}

.panel-default1 > .panel-heading1{
    padding: 0;
    height: 100%;
    width: 100%;
    background-color:  #fff;
    color: #708198;
    border-radius: 50px;
    border: solid #708198 3px;
    margin-bottom: 10px;
}

.panel-default1>.panel-heading1+.panel-collapse>.panel-body {
    background: #d4d7dd;
    border-radius: 40px;
    margin-top: 0px;
}

.panel-body{
    margin-top: 10px;
}



.panel-group .panel {
    margin-bottom: 0;
    border-radius: 50px;
}

我将如何根据手风琴是否折叠来更改图像？提前致谢！

Answer 1

当你想与另一个图像切换时，你通常希望能够顺利进行。但是你不能顺利地改变display 属性。它是 inline（<img> 元素的默认值）或 none。两者之间没有任何区别。

解决方案是给父position:relative并给其中一张图片position: absolute（通常是第一张）。这将使他们坐在彼此之上。现在你需要做的就是玩弄他们的opacity，它可以从1（可见）平滑地变成0（完全透明）。

.panel-heading [data-toggle] {
  position: relative;
}
.panel-heading img {
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
.panel-heading .open-arrow {
  position: absolute;
  opacity: 0;
}
.panel-heading [aria-expanded="true"] .open-arrow {
  opacity: 1;
}
.panel-heading .down-arrow {
  opacity: 1;
}
.panel-heading [aria-expanded="true"] .down-arrow {
  opacity: 0;
}

注意： 要使上述工作正常，您需要从 .down-arrow 图像中删除内联 style="display: none;" 属性。我可以在 CSS 中使用 !important，但这样做是错误的。

不相关并且作为 side-note，您的控制台中有一些错误，主要是因为未在运行 jQuery 脚本之前加载 jquery。

当手风琴 collapsed/expanded 时更改图像

Changing image when accordion is collapsed/expanded

html

javascript

css

jquery

jquery-ui-accordion