javascript - 不影响嵌套 Accordion jquery 的自定义样式 - 如何修复

Question

我正在尝试创建自定义样式的 Accordion 。到目前为止，它的工作原理正是我需要它为最外层/父级 Accordion 工作的方式。但是，当涉及到嵌套 Accordion 时，这些样式会被 jquery-ui 的样式覆盖。

LINK TO THE FIDDLE

代码

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

您只是没有为您的 subAccordion 类指定元素样式。试试看(例如):

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

这是带有您的代码的 jsfiddle 示例:http://jsfiddle.net/25dZR/1/