javascript - 折叠/展开 Accordion 时更改图像

Question

我的网站上有 Accordion 。我有以下用于 Accordion 的 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;
}

我将如何根据 Accordion 是否折叠来更改图像？

Answer 1

当您想要将一张图片与另一张图片切换时，您通常希望能够顺利进行。但是你不能改变 display属性(property)顺利。要么是 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;
}

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

---

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