自定義樣式不影響嵌套的手風琴jquery - 如何修復

我想創建一個自定義風格的手風琴。到目前爲止，它的工作原理就是我需要它爲最外/母手風琴工作。然而，當談到嵌套式手風琴時，風格正在被jquery-ui的風格所覆蓋。自定義樣式不影響嵌套的手風琴jquery - 如何修復

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>

$(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'}); 
    }); 

}

來源

2014-03-13 Harsha Venkatram

你只爲你subAccordion類沒有指定元素的樣式。嘗試（例如前）：

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

這裏的jsfiddle例如與您的代碼：http://jsfiddle.net/25dZR/1/

來源

2014-03-13 09:42:37

AARGH，我覺得拉出我的頭髮沒有看到那個！感謝芽 –

如果您想要應用自定義樣式，請將「！important」添加到相應的樣式中。

如：

padding:0px !important;

這將避免其他風格嘗試覆蓋它。

來源

2014-03-13 09:35:21

增加你的css聲明的權重，它會覆蓋它們的樣式聲明。

Specificity reference

來源

2014-03-13 09:38:17 XciA

自定義樣式不影響嵌套的手風琴jquery - 如何修復

回答

相關問題