0

標準のネストされた JQuery UI アコーディオンがあります。私の問題は、内側のアコーディオンを親アコーディオンとは異なるスタイルにしたいということです。アコーディオンにスタイルを適用する CSS ルールはわかっていますが、内側のアコーディオンを対象とするセレクターが見つかりません。

近いセレクターは :nth-child() 疑似セレクターだけでした。問題は、内側のアコーディオンにいくつの要素が含まれるか、上部のアコーディオンにいくつの要素が含まれるかがわからないことです。

1 つのルールは、3 番目のレベルの入れ子が決してないことを知っているということです。

この CSS ルールは、すべてのアコーディオン ヘッダーのスタイルを設定します

.ui-accordion-header.ui-state-default {
    background: none repeat scroll 0 0 #19A053;
    border-color: #19A053;
}

私は今、このようなことをする方法が必要です

.ui-accordion-header.ui-state-default if-inside-another-accordion{
    background: none repeat scroll 0 0 #dddddd;
    border-color: #dddddd;
}

CSS セレクターの専門家であるが、JQuery によって生成された HTML を見たことがない場合のために、ネストされたアコーディオンによって生成されたコードのサンプルを次に示します。

<div id="content">
  <div role="tablist" style="display: block;" class="gw_accordion ui-accordion ui-widget ui-helper-reset">
    <div tabindex="0" aria-selected="true" aria-controls="ui-accordion-1-panel-0" id="ui-accordion-1-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a class="gw_chapter_menu_link" href="#24" alt="">Top Level Header 1</a></div>
    <div aria-hidden="false" aria-expanded="true" role="tabpanel" aria-labelledby="ui-accordion-1-header-0" id="ui-accordion-1-panel-0" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
      <p>some text here</p>
      <div role="tablist" style="display: block;" class="gw_accordion ui-accordion ui-widget ui-helper-reset">
        <div tabindex="0" aria-selected="false" aria-controls="ui-accordion-2-panel-0" id="ui-accordion-2-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#27" alt="Maybe Now???">Nested Header 1</a></div>
        <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-2-header-0" id="ui-accordion-2-panel-0" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
          <p>some text here</p>
        </div>
        <div tabindex="-1" aria-selected="false" aria-controls="ui-accordion-2-panel-1" id="ui-accordion-2-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#25" alt="">Nested Header 2</a></div>
        <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-2-header-1" id="ui-accordion-2-panel-1" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
         <p>some text here</p>
        </div>
      </div>
    </div>
    <div tabindex="-1" aria-selected="false" aria-controls="ui-accordion-1-panel-1" id="ui-accordion-1-header-1" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#26" alt="I hope this works">Top Level Header 2</a></div>
    <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-1-header-1" id="ui-accordion-1-panel-1" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
      <p>some text here</p>
      <div role="tablist" style="display: block;" class="gw_accordion ui-accordion ui-widget ui-helper-reset">
        <div tabindex="0" aria-selected="false" aria-controls="ui-accordion-3-panel-0" id="ui-accordion-3-header-0" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="gw_chapter_menu_link" href="#28" alt="Really">Nested Header 1(for second top header)</a></div>
        <div aria-hidden="true" aria-expanded="false" role="tabpanel" aria-labelledby="ui-accordion-3-header-0" id="ui-accordion-3-panel-0" style="display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
          <p>some text here</p>
        </div>
      </div>
    </div>
  </div>
</div>
4

1 に答える 1

0

私には、これを行う必要があるように見えます:

.ui-accordion.ui-state-default .ui-accordion .ui-accordion-header.ui-state-default {
    background: none repeat scroll 0 0 #dddddd;
    border-color: #dddddd;
}

または、それが .ui-state-default 状態にあるかどうかへの依存度に応じて、次のように単純化することもできます。

.ui-accordion .ui-accordion .ui-accordion-header {
    background: none repeat scroll 0 0 #dddddd;
    border-color: #dddddd;
}

これは基本的に、「.ui-accordion 要素の子孫でもある .ui-accordion の子孫である場合にのみ、これらのスタイルを .ui-accordian-header に適用する」ということです。

これを視覚化する別の簡単な方法は、次のようになります。

ヘッダー付きの別のコンテナー内のヘッダー付きのコンテナーを次に示します。

<div class="container">
    <h1 class="header">Header 1</h1>
    <div class="container">
        <h1 class="header">Header 2</h1>
    </div>
</div>

ヘッダー 2だけをスタイルするには、次のようにします。

.container .container .header {
    styles here will only apply to header 2, not header 1
}
于 2013-02-02T05:57:37.853 に答える