ओपन/बंद

Question

पर बूटस्ट्रैप 3 एग्रीजन स्टाइल बीएस 3 accordions स्टाइल करने की कोशिश कर रहा है ... मैंने शीर्षक और शरीर में एक छवि जोड़ा था। मैंने होवर और/या खुले पर करीबी और नीले पाठ पर काले शीर्षक पाठ सेट करने में कामयाब रहा है।

मैं होवर और/या खुले पर 'पैनल-हेडिंग' के पृष्ठभूमि रंग को कैसे बदल सकता हूं? मैंने बिना किसी परिणाम के कुछ चीजों की कोशिश की है। क्या यह शैली को जोड़ने/हटाने के द्वारा एक 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; 
} 

Answer 1

के बाद से मैं कुछ भी करने में असमर्थ था सीएसएस में केवल मैं आगे बढ़ गया और कुछ jquery। रुचि रखने वाले किसी भी व्यक्ति के लिए आप पूरे div में एक सक्रिय कक्षा को जोड़/हटा सकते हैं और उस तरह स्टाइल लागू कर सकते हैं।

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

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

Answer 2

इस प्रयास करें:

होवर प्रभाव के लिए:

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

Answer 3

इस 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 चयनकर्ता के साथ स्टाइल जा सकता है।

Answer 4

यहाँ सीएसएस एकमात्र समाधान मैं के साथ आया था ...

jQuery समाधान एक उपयोगकर्ता बहुत जल्दी शैलियों उतार फेंका गया हो सकता है पर क्लिक करता है, क्योंकि यदि महान नहीं था।

बस अपने हेडर वर्ग को लक्षित जब यह नहीं है ढह:

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

एचटीएमएल मेरे पास है:

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

अंत में मंडराना के बारे में सवाल का जवाब देने, यह उतना ही आसान है के रूप में:

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