當手風琴摺疊更改圖像/擴展

Question

我一直在試圖找出如何做到這一點，和所有我遇到的答案沒有做什麼，我想做的事情。我有我的網站上手風琴，你可以在這裏找到http://162.243.140.112/我有以下HTMLfor手風琴：

<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，但沒有找到任何成功。如果需要的話

.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（通常是第一個）。這將使他們坐在彼此的頂部。現在，所有你需要做的是與他們的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。