중첩 된 아코디언 jquery에 영향을 미치지 않는 사용자 정의 스타일 - 수정 방법

Question

사용자 정의 스타일 아코디언을 작성하려고합니다. 지금까지, 그것은 가장 바깥/부모 아코디언을 위해 작동하는 데 필요한 방식으로 정확하게 작동합니다. 그러나 중첩 된 아코디언의 경우 jquery-ui 스타일에서 스타일이 대체되고 있습니다.

LINK TO THE FIDDLE

CODE

CSS :

* 
{ 
    padding:0px; 
    margin:0px; 
} 

#accordion 
{ 
    width:60%; 
    margin-left: 20%; 
    margin-top: 20px; 
} 
.subAccordion 
{ 
    width:100%; 
    margin-left: 0%; 
    margin-top: 10px; 
} 

.ui-accordion-header 
{ 
    background: url(''); 
    background-color: #3f414b; 
    border-radius: 3px; 
    border:0px; 
    color:#afb0b3; 
    font-size: 16px; 
    font-weight: 300; 
    padding:1em; 
    margin-bottom: 10px; 
} 

.ui-accordion-content-active 
{ 
    background: url(''); 
    background-color: #3f414b; 
    border-top-right-radius: 0px; 
    border-top-left-radius: 0px; 
    border:0px; 
    color:#afb0b3; 
    font-size: 14px; 
    font-weight: 300; 
    line-height: 22px; 
    margin-bottom: 10px; 
    margin-top: -10px 
} 

.ui-accordion-header-active 
{ 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
    color:#afb0b3; 
    font-size: 16px; 
    font-weight: 300; 
    border-bottom: 1px dashed #595b66; 
    margin-bottom: 10px; 
} 

.ui-accordion .ui-accordion-icons 
{ 
    padding: 1em; 
} 
.ui-accordion .ui-accordion-content 
{ 
    padding: 1em; 
} 
.subAccordion 
{ 
    display: block; 
    height: auto; 
    width: 90%; 
    padding: 5% !important; 
} 
#accordion div ul li 
{ 
    list-style-type: none; 
    line-height: 27px; 
    cursor:pointer; 
} 
.subAccordion div ul li 
{ 
    list-style-type: none; 
    line-height: 27px; 
    cursor:pointer; 
} 

HTML

<div id="accordion"> 
    <h3>Talent Supply</h3> 
    <div> 
    <ul> 
     <li>PPP</li> 
     <li>PPP Instant</li> 
     <li>Patent</li> 
     <li>GitHub</li> 
     <li>BLSI</li> 
    </ul> 
    </div> 
    <h3>Talent Demand</h3> 
    <div class="subAccordion"> 
     <h3>Job Boards</h3> 
     <div></div> 
     <h3>Company Career Sites</h3> 
     <div> 
      <ul> 
       <li>Microsoft</li> 
       <li>PPP Instant</li> 
       <li>Patent</li> 
       <li>GitHub</li> 
       <li>BLSI</li> 
      </ul> 
     </div> 
    </div> 
    <h3>Talent Trends</h3> 
    <div> 
    <ul> 
     <li>News 1</li> 
     <li>News 2</li> 
    </ul> 
    </div> 
    <h3>Section 4</h3> 
    <div> 
     <p> 
      Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
      et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
      faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
      mauris vel est. 
     </p> 
     <p> 
      Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. 
     </p> 
    </div> 
</div> 

JS

$(function() { 
    $(".subAccordion").accordion({active: false, collapsible: true}); 
    $("#accordion").accordion(); 

    }); 
$(document).ready(function(event){ 
    _bindEvents(); 
}) 

function _bindEvents() 
{ 
    $(".subAccordion").on("accordionbeforeactivate", function(event, ui) { 
     if($.trim($(ui.newPanel).html()).length == 0) 
     { 
      event.preventDefault(); 
     } 

    }); 

    $("#accordion").on("accordionactivate", function(event, ui) { 
     $('.ui-accordion-content').css({'height':'auto'}); 
    }); 

} 

Answer 1

당신은 요소의 스타일을 지정하지 않았습니다. 코드와 함께 여기

.ui-accordion-header, .subAccordion .ui-accordion-header { 
    #styles 
} 

jsfiddle 예 : 그 (앞 예)를 시도 http://jsfiddle.net/25dZR/1/

Answer 2

사용자 정의 스타일을 적용하려면 해당 스타일에 "! important"를 추가하십시오.

예는 :

padding:0px !important; 

이 그것을 무시하려고 다른 스타일을 방지 할 수 있습니다.

Answer 3

CSS 선언의 무게를 늘리면 스타일 선언이 무시됩니다. 당신이 클래스를 subAccordion에 대한

Specificity reference