可摺疊面板+按鈕問題

Question

我有一個可摺疊面板，我希望更改圖像（從+到 - ）。我在網上找到了一些解決方案，我希望通過css實現。但是，由於某些原因，我的CSS有些問題。有人能告訴我究竟是什麼嗎？

HTML

 <div class="panel panel-default at-panel"> 
      <div class="panel-heading at-panel-heading">Panel<img class="collapsed at-collapse-button" data-toggle="collapse" data-target="#panelBodyNA"/></div> 
      <div id="panelBodyNA" class="panel-body at-panel-body collapse"> 
      <p> Test</p> 
      </div> 
     </div> 

CSS

img.at-collapse-button.collapsed:before{ 
    content:url("../img/plus.png"); 
} 

img.at-collapse-button:before{ 
    content:url("../img/minus.png"); 
} 

Answer 1

不能使用：僞元素與之前的圖像元素。 你必須遵循這個方法：

<div class="panel panel-default at-panel"> 
    <div class="panel-heading at-panel-heading collapsed at-collapse-button" data-toggle="collapse" data-target="#panelBodyNA">Panel</div> 
    <div id="panelBodyNA" class="panel-body at-panel-body collapse"> 
    <p> Test</p> 
    </div> 
</div> 

你的CSS然後：

.at-collapse-button.collapsed:before{ 
    content:url("../img/plus.png"); 
} 

.at-collapse-button:before{ 
    content:url("../img/minus.png"); 
} 

或任何其他的CSS，你想擁有，因爲內容的網址不會給你帶來的圖像。

但是你可以操縱你的僞元素，你想例如：

.at-collapse-button.collapsed:before{ 
    position: relative; 
    width: 20px; 
    height: 20px; 
    background-image:url("../img/plus.png"); 
}