Bootstrap 3 styl akordeonowy na otwartym/zamkniętym

Question

Próbujesz stylizować akordeony bs3 ... Dodałem obrazek do tytułu i ciała. Udało mi się ustawić czarny tekst tytułu na zamkniętym i niebieskim tekście po najechaniu kursorem i/lub otworzeniu.

Jak zmienić kolor tła nagłówka panelu po najechaniu kursorem i/lub otworzeniu? Próbowałem kilku rzeczy bez rezultatów. Czy to będzie rozwiązanie tylko jquery, dodając/usuwając style?

<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; 
} 

Answer 1

Ponieważ byłem w stanie nic zrobić w css tylko poszedłem naprzód i trochę jquery. Dla wszystkich zainteresowanych możesz dodać/usunąć aktywną klasę do całego div, a następnie zastosować stylizację w ten sposób.

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

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

Answer 2

Spróbuj to:

Dla Hover Effect:

.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; 

} 

jeśli tło nie uzyskiwanie nadpisane, można też spróbować:

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

Answer 3

W tym celu angularjs sposób (bez JQuery) można umieścić klasę warunkową na 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; 
} 

ten sposób klasa active jest stosowana do całego accordion-group gdy jest ona otwarta i panel-heading div (wygenerowane przez bootstrap-ui) może być stylizowany z konkretnym selektora CSS.

Answer 4

Oto CSS jedynym rozwiązaniem wymyśliłem ...

Rozwiązanie jQuery nie był wielki, ponieważ jeśli użytkownik kliknie zbyt szybkie style można dostać wyrzucony.

Wystarczy kierować klasę nagłówki kiedy to nie zawalił:

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

HTML mam:

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

wreszcie odpowiedzieć na pytanie o zawisu, to jest tak proste, jak:

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