Bootstrap 3手風琴開啓/關閉造型

試圖風格化bs3手風琴......我爲標題和正文添加了一個圖像。我設法在懸停和/或打開時設置關閉和藍色文本的黑色標題文本。Bootstrap 3手風琴開啓/關閉造型

如何更改懸停和/或打開時「面板標題」的背景顏色？我嘗試了很多沒有結果的事情。這是否會通過添加/刪除樣式成爲jquery唯一的解決方案？

<div class="panel panel-faq"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2"> 
       1. Some title goes here 
      </a> 
     </h4> 
    </div> 
    <div id="accordion1_2" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       sample entry text goes here 
     </div> 
    </div> 
</div> 


.panel-faq{ 
    border-color: #dddddd; 
} 
.panel-faq .panel-heading { 
    color: #333333; 
    background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center; 
    padding-left: 45px; 
    border-color: #dddddd; 
} 

.panel-default > .panel-heading + .panel-collapse .panel-body { 
    border-top-color: #dddddd; 
} 

.panel-default > .panel-footer + .panel-collapse .panel-body { 
    border-bottom-color: #dddddd; 
} 

.panel-faq .panel-body { 
    background: url('/assets/img/faq-answer.png') no-repeat 40px 20px; 
    padding-left: 75px; 
} 

.panel-faq .accordion-toggle, .panel-faq a.accordion-toggle:hover{ 
    color:#428bca; 
    text-decoration:none; 
} 

.panel-faq .accordion-toggle.collapsed { 
    color:#333333; 
}

來源

2013-12-15 user756659

因爲我無法做任何事在CSS中，只有我繼續前進和一些jQuery。對於任何感興趣的人，你可以添加/刪除一個活躍的類到整個div然後申請樣式。

$('.panel-faq').on('show.bs.collapse', function() { 
     $(this).addClass('active'); 
    }); 

    $('.panel-faq').on('hide.bs.collapse', function() { 
     $(this).removeClass('active'); 
    });

來源

2013-12-15 08:35:45 user756659

謝謝。我可以補充的是，如果你想在開始時打開一個，你需要手動將'collapse'類添加到該面板div標記的HTML中。 – Steve

謝謝 - 這是非常有用的 –

我有幾個面板來管理，所以我修改了一下代碼，最後得到：$（'。classofacordord.panel'）。on（'show.bs.collapse'，function （）{ $（this）.addClass（'active'）; }）; （'.classofacordord.panel'）。（'hide.bs.collapse'，function（）{ $（this）.removeClass（'active'）; }）; – madagalbiati

試試這個：

懸停效果：

.panel-faq .panel-heading:hover { 

    color: #333333;  
    background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;  
    padding-left: 45px;  
    border-color: #dddddd; 

}

如果後臺沒有得到重寫，你也可以嘗試：

background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center !important;

來源

2013-12-15 08:15:04

要做到這一點的AngularJS方式（沒有JQuery），你可以在accordion-group上放置一個條件類。

<div accordion-group is-open="first.open" 
    ng-class="{'active': first.open}"> 
    <div accordion-heading>First Section</div> 
    <div>First content</div> 
</div> 


.active[accordion-group] .panel-heading { 
    background-color: black; 
    color: white; 
}

這種方式，active類被施加到整個accordion-group當它打開和panel-heading DIV（通過自舉的UI生成的）可以與特定的CSS選擇樣式。

來源

2014-05-28 20:42:43

這裏是CSS只有我想出瞭解決方案...

，因爲如果用戶點擊太快的風格變得揭去jQuery的解決方案是不是很大。

只是針對你的頭班時，它的不崩潰：

.panel-heading:not(.collapsed) { 
/*Your styles*/ 
}

的HTML我有：

<div class="collapsed panel-header" data-toggle="collapse" data-parent="panelParent" data-target="targetPanel">Header</div>

最後回答關於懸停的問題，它是那樣簡單：

.panel-heading:hover { 
/*Your styles*/ 
}

來源

2017-04-13 13:19:43 maxshuty

Bootstrap 3手風琴開啓/關閉造型

回答

相關問題