引導3手風琴 - 擴大面板標題

旁邊的摺疊圖標我想這個簡單的引導3手風琴：引導3手風琴 - 擴大面板標題

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon 
     </div> 
    </div> 
    </div> 
</div>

在關閉時有一個加號圖標，並在懸停和活躍在負圖標。我的CSS：

.panel-title a { 
    background: url('plus.png') no-repeat 100% 50% ; 
    padding-right:20px;} 
.panel-title a:hover{ 
    background: url('minus.png') no-repeat 100% 50% ; } 
.panel-title a:active { 
    background: url('minus.png') no-repeat 100% 50% ; }

到目前爲止工作，除了活動狀態。你能幫助我使它工作嗎？謝謝

來源

2014-04-14 geoplous

你試過'focus'而不是'active'嗎？ – ZimSystem

是的，但當你再次點擊關閉仍然是減號圖標 – geoplous

如果我沒有記錯，:active狀態只發生在鏈接被實際點擊時。與崩潰的狀態無關。

爲了得到這個工作，我想你的CSS改變這樣的事情：

.panel-title a { 
    background: url('plus.png') no-repeat 100% 50% ; 
    padding-right:20px;} 
.panel-title a:hover{ 
    background: url('minus.png') no-repeat 100% 50% ; } 
.panel-title a.active { 
    background: url('minus.png') no-repeat 100% 50% ; }

注意，而不是使用:active假，我們實際上要使用一個名爲.active類。

現在，只需通過JavaScript打開和關閉類。有幾個方法可以做到這一點，但最直接的將是一個監聽器附加到現有a標籤，就像這樣：

$('[data-toggle]').on('click', function() { 
    $(this).toggleClass('active'); 
});

因此，在總結，在你的CSS改變:active到.active，和添加三行javascript。

查看http://www.bootply.com/130209作爲一個工作示例。

來源

2014-04-15 01:37:27

嗨肖恩，謝謝你的回答，但沒有奏效。腳本沒有任何區別。 – geoplous

對不起，完全錯誤的JavaScript。用正確的javascript更新答案並鏈接到工作示例。 –

謝謝肖恩，我看到那在那裏工作，但不在我的環境中工作。我在T3 bs3模板的Joomla模塊中使用它，這個腳本在頁面源代碼中，但它並不能提供.active狀態。有任何想法嗎？ – geoplous

引導3手風琴 - 擴大面板標題

回答

相關問題