アコーディオンが折りたたまれた/展開されたときの画像を変更する

Question

私はこれを行う方法を理解しようとしてきましたが、私が遭遇するすべての答えは私がしたいことをしません。それは正常に動作しますが、私は右のパネルのタイトルテキストの前に画像タグを持っている

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

：私はHTMLforアコーディオンを以下しているあなたがここにhttp://162.243.140.112/を見つけることができます私のサイト上でアコーディオンを持っています。私は見出しのテキストの前のイメージを別のイメージに変更したいと思っています。下向きまたは右向きの矢印でしょうか。私は見つけた別の答えに従ってこのJavaScriptを試しましたが、何の成功も見いだせませんでした。私はアコーディオンが折りたたまれているかどうかに基づいて画像を変更することについてどのように行くだろう

.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; 
} 

を必要に応じて

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

    }); 
}); 

は、ここに私のCSSですか？ありがとうございました！

Answer 1

イメージを別のイメージに切り替える場合は、通常、スムーズにイメージを作成する必要があります。しかし、displayプロパティをスムーズに変更することはできません。 inline（<img>のデフォルト）またはnoneです。間には何もありません。

解決策は、親にposition:relativeを与え、position: absoluteの1つ（通常は最初のもの）を与えることです。これにより、彼らはお互いの上に座るでしょう。今度は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を使うことができましたが、それについては間違った方法でしょう。

---

無関係とサイドノートとして、あなたは主にjQueryスクリプトを実行する前にjqueryをロードしないために、あなたのコンソールでいくつかのエラーを持っています。