1

私は、クラスがアクティブな状態で実際に焦点が当てられているものについて、すべての受け入れを非表示にできるようにする必要がある次のリストを持っています。

 <Ul>
        <Li>something</li>
          <ul>
           <li>Something</>
           <li>Something</>
          </ul>
        <Li>something</li>
        <Li>something</li>
        <Li>
            <Ul>
                <Li class="active">something</li>
                <Li>omething</li>
            </Ul>
        </li>
        <Li>something</li>
    </Ul>

アクティブなクラスの最下位レベルのものに関連しないすべてのliで.hide（）を使用できる必要があります

結果は次のようになります

<Ul>
  <Li>something</li>
  <Li>something</li>
  <Li>something</li>
    <Li>
        <Ul>
            <Li class="active">something</li>
            <Li>omething</li>
        </Ul>
    </li>
  <Li>something</li>
 </Ul>
4

2 に答える 2

2

DOMをトラバースして、最初のレベルのli要素とその兄弟を見つけることができます。レベルが2つしかない場合、これは機能するはずです。

$('li.active').parent().closest('li').siblings().children('ul').hide();

3つ以上のレベルがある場合は、ルートulにクラスまたはIDを指定することをお勧めします。

$('li.active').closest('#root > li').siblings().children('ul').hide();
于 2013-02-04T00:49:58.137 に答える
0

$( 'li:not(.active,.active ~ li,.active li,:has(.active))' ).hide();

これにより、すべての要素が選択されますが、（を使用して）li除外されます。:not()

  1. .active—アクティブなli要素自体
  2. .active ~ lili—アクティブな要素の兄弟li要素
  3. .active lili—アクティブな要素の子孫li要素
  4. has(.active)—子孫としてliアクティブな要素を持つ要素li

jsfiddleデモ

liアクティブな要素の兄弟の子孫も表示し続ける場合は、セレクターに追加.active ~ li liします。:not()

$( 'li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))' ).hide();

jsfiddleデモ

この回答に対するOPの最初のコメントのフォローアップ：

li最初のセレクターの前にを追加するだけです。

$( 'li li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))' ).hide();

jsfiddleデモ

于 2013-02-04T01:54:43.623 に答える