1

現在のページへのパスにあるすべての < LI > にクラス「アクティブ」が与えられる、ブートストラップ ベースの < UL > ナビゲーション ツリーがあります。したがって、ホームページの 2 レベル下のページにいた場合、コードはおおよそ次のようになります。

<ul>
  <li>Link1</li>
  <li>Link2</li>
  <li class='active'>Link3
    <ul>
      <li>sublink1</li>
      <li class=active>sublink2
        <ul>
          <li>subsublink1</li>
          <li class=active>subsublink2 THIS IS MY PAGE</li>
        </ul>
      </li>
    </ul>
  </li>

問題は、ブートストラップがすべての li.active 要素に境界線を追加することです。そして、境界線を最も深いもの、つまり実際に表示しているページにのみ適用したいのです。

ブートストラップの基盤を台無しにするつもりはないので、パス全体からアクティブなクラスを削除するつもりはありません。

私の目標は、jQuery で不要な境界線を削除することです。私は、パス内で最も深い li.active であることを示す、li.active である子を持たない li.active を見つけたいと考えています。次に、li.active を持つすべての親を見つけて、それらから境界線を削除します。

その JQUERY をどのように構築しますか?

私はこのようなことを考えています(notHasClassが存在しないことを知っています):

$('li.active').children().notHasClass('active').parents.hasClass('active').css('border','none');
4

5 に答える 5

0

それを達成するためのわずかに異なる方法を見つけました：

$('li.active').has('ul').addClass('hasSubmenu');

明らかに、私のliにulが含まれている場合、それは最も深いli.activeになることはできません。

これで、純粋な css を使用して境界線を取り除くことができます。

li.active.hasSubmenu {border:none}
于 2013-07-24T09:24:31.277 に答える
0

:last を使用すると、DOM の最後の要素を取得できます。したがって、li.active で親を取得し、境界線を削除できます。

$('li.active:last').parents('li.active').css('border', 'none');

例を確認してください: http://jsfiddle.net/kmgUh/

あるいは、.css('border', 'none') を removeClass('active') に置き換えることもできます。

よろしくお願いします

于 2013-07-24T09:18:15.820 に答える
0

liは子としてのみ持つことができ、クラスulのみliを持つと仮定しています。これらの仮定では、これは機能します。.active

$('li.active').filter( function () {
    if ( $(this).children('ul').length === 0 )
        return true;
    return false;
}).parents('li').removeClass('active');

デモ

于 2013-07-24T09:22:40.030 に答える