1

私はこのようなマークアップを持っています。

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

ここでjQuery、選択したクラス内にクラスを追加しました。したがって、ユーザーがリンク（ここでは購入リンク）にカーソルを合わせると、マークアップは次のようになります

<div id="chromemenu" class="chromestyle">
  <ul>
    <li><a rel="dropmenu1" href="#" class="selected">Buy</a></li>
    <li><a rel="dropmenu2" href="#" class="">Sell</a></li>
    <li><a rel="dropmenu3" href="#" class="">Community</a></li>
    <li><a rel="dropmenu6" href="#" class="">Languages</a></li>
    <li><a rel="dropmenu4" href="#" class="">My Account</a></li>
  </ul>
</div>

ここで、クラスが選択されている li だけにスタイルを与えたいと思います。li に対する私のスタイルは、li 要素に境界線を与えることです。それで、誰かがこれを行う方法を教えてもらえますか? どんな助けや提案も本当に価値があります。ありがとう....

更新li要素 に境界線を付けたいaので、そのフィールドで私を助けてください。これは単純なcssで達成できますか? ねえ、私はまだ答えを待っています...

4

3 に答える 3

4

子孫のクラス名に基づいて要素の親をスタイリングしているとき:

$('a.selected').closest('li').css('border-top','1px solid #000');

JS フィドルのデモ。

または、境界線を削除するため、少し良くなります (これはマウスオーバー/マウスアウトの場合と仮定します) :

$('a.selected').closest('li').hover(function(){
    $(this).css('border-top','1px solid #000');
},function(){
    $(this).css('border-top-width','0');
});

JS フィドルのデモ。

スタイリングのためのプレーンな JavaScript オプション:

var selected = document.querySelector('a.selected');
selected.parentNode.style.borderTop = '1px solid #000';

JS フィドルのデモ。

var selected = document.getElementsByClassName('selected')[0];
selected.parentNode.style.borderTop = '1px solid #000';

JS フィドルのデモ。

要素のインライン スタイルを直接操作するのではなく、 jQuery のhover()メソッドを使用する改良された代替手段:addClass()

$('a.selected').closest('li').hover(function(){
    $(this).addClass('activeParent');
},function(){
    $(this).removeClass('activeParent');
});

そして、次の CSS:

li {
    /* to prevent jumping down of the li when the border is shown */
    border-top: 1px solid transparent;
}
.activeParent {
    border-top-color: #000;
}

JS フィドルのデモ。

于 2013-03-07T11:06:55.403 に答える
3

li境界線を付けるには、 を呼び出した後、次のようaddClassにします。

$("a.selected").parent().css("border", "1px solid #000");

次に、選択を解除すると、単純に削除できます。

$("a:not(.selected)").parent().css("border", "none");

フィドル: http://jsfiddle.net/BMTAE/

于 2013-03-07T11:02:30.753 に答える
0

これはおそらくあなたが望む答えではないことを私は理解していますが、とにかくそれを与えるつもりです。

すでにjQueryを使用してselectedクラスをaタグに追加しています。おそらく次のようなものを使用しています：

$('a').hover(
    function(){
        $(this).addClass('selected');
    },
    function(){
        $(this).removeClass('selected');
    }
);

これを次のように変更した場合：

$('a').hover(
    function(){
        $(this).parent().addClass('selected');
    },
    function(){
        $(this).parent().removeClass('selected');
    }
);

クラスを親に追加してからli、

li {border: 1px solid black;}

また

.chromestyle li {border: 1px solid black;}

あなたのスタイルを設定しますli。

この方法の主な利点は、CSSをすべてスタイルシートに保持することです。これにより、コードの将来のメンテナは、ホバーイベントハンドラーを探してJavaScriptファイルを探し回る代わりに、CSSを簡単に見つけることができます。

を追加するparent()と少し遅くなる可能性がありますが、他のソリューションでは、とにかく親にCSSを追加するためにjQueryを使用する必要があるため、CSSのものはjavascriptではなくブラウザーによって処理されるため、全体的に速度が向上するはずです。

于 2013-03-07T11:41:04.580 に答える