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; }（完全透明）。

style="display: none;"

注意：要使上述功能正常，您需要从.down-arrow图像中删除内联!important属性。我可以在CSS中使用jquery，但这是错误的方法。

不相关，作为旁注，您在控制台中有一些错误，主要是因为在运行jQuery脚本之前没有加载dt.AutoGeneratingColumn += Dt_AutoGeneratingColumn; //.... private void Dt_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e) { DataGridColumn col = e.Column; // you can set the maximum width of the column: col.MaxWidth = 200.0; // or you can define a element style, for text wrapping, etc. col.CellStyle = (Style)FindResource("cellStyle"); }。

折叠/展开手风琴时改变图像

1 个答案: