1

内部のオブジェクトを操作するために、以前に定義した menuBar オブジェクトを使用しようとしています。

var menuBar = $(".menu-bar ul");
var menuActive = menuBar.find("li.active");
menuBar.hover(function(){
    menuActive.toggleClass("active");
});
$('.menu-bar ul > li > a[href="'+ window.location.href +'"]').parent().addClass("active");

私が気に入らないのは、DOM 検索をもう一度呼び出して、リンクの親のアクティブなクラスを定義することです。

menuBar 変数でそれを行う方法について何か考えはありますか?

4

3 に答える 3

3

あなたはおそらく探しています：

menuBar.find('> li > a[href="'+ window.location.href +'"]').parent().addClass("active");

または実際には、親を選択しようとしているので：

menuBar.find('> li:has(> a[href="'+ window.location.href +'"])').addClass("active");

疑似クラスを使用すると、:has別の要素を含む要素を選択できます。それが本当にあなたが目指していることであり、セレクター自体が可能な限りの最適化を行えるようにする必要があります。

于 2012-11-22T05:47:23.317 に答える
1

検索するコンテキストを指定できます。

$('li > a[href="'+ window.location.href +'"]', menuBar.children()).parent().addClass("active");

これmenuBar.children()がコンテキストです。

于 2012-11-22T05:47:21.213 に答える
1

このようなことを試してください

var menuBar = $(".menu-bar ul");
var menuActive = menuBar.find("li.active");
menuBar.hover(function(){
    menuActive.toggleClass("active");
});
$('li > a[href="'+ window.location.href +'"]',menuBar).parent().addClass("active");
于 2012-11-22T05:48:37.337 に答える