1

単純な順序なしリストを使用してすべてのリンクを一覧表示するナビゲーションを作成しようとしています。基本的なもの。ただし、最初のLI要素のクラス名は「section-title」です。この「section-title」に続くのは、他のページへのリンクです。

次に、そのセクションのリンクの1つ（セクションタイトルの下のLI要素）にカーソルを合わせながら、li.section-titleの背景色を黒に変更したいと思います。

問題は、ナビゲーションに複数のUL LI.section-titleがあるため、（機能した）直接法が使用していたことです。

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
    $('#navigation ul li.section-title').animate( {
        backgroundColor: "#000",
        color: "#F9B60F"
    }, "fast" );
},
function() {
    $('#navigation ul li.section-title').animate( {
        backgroundColor: "#FFF",
        color: "#000000",
    }, "fast" );
}
);

});

ただし、ページのすべてのli.section-title要素の色が同時に変更されます。

現在、（this）.parentを使用して、現在ホバーされているli要素を含むグループのli.section-titleのみを取得しようとしていますが、これは何らかの理由でまったく機能しません。多分それは間違っているか私のコードの背後にある理論です。

これは私の現在のコードです（これは機能しません）：

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
    $(this).parents(".section-title").animate( {
        backgroundColor: "#000",
        color: "#F9B60F"
    }, "fast" );
},
function() {
    $(this).parents(".section-title").animate( {
        backgroundColor: "#FFF",
        color: "#000000",
    }, "fast" );
}
);

});

私はjQueryにかなり慣れておらず、この種のドキュメントをオンラインでたくさん検索しましたが、理解できませんでした。

たぶんあなたはできる。問題のWebサイト（壊れたスクリプトを含む）は、www.jannisgundermann.comにあります。

ただし、liアイテムの「ナッジング」と色の変更は、このスクリプトとは関係のない別のスクリプトによって行われることに注意してください。

読んでくれてありがとう。ジャニス

4

2 に答える 2

2

必要なliを適切にターゲットにしていません。これを試して：

$('#navigation ul li a').hover(
    function() {
        $(this).parents('ul').find('li.section-title').animate( {
            backgroundColor: "#000",
            color: "#F9B60F"
        }, "fast" );
    },
    function() {
        $(this).parents('ul').find('li.section-title').animate( {
            backgroundColor: "#FFF",
            color: "#000000",
        }, "fast" );
    }
);

最初に親ulを見つけてから、そのul内で強調表示する要素を見つける必要があります。

于 2009-03-05T23:34:14.980 に答える
0

代わりにこれを試してください。2番目のパラメーターとして要素を指定すると、その要素の子のみが検索されます。

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
        $('li.section-title', $(this).parent()).animate( {
                backgroundColor: "#000",
                color: "#F9B60F"
        }, "fast" );
},
function() {
        $('li.section-title', $(this).parent()).animate( {
                backgroundColor: "#FFF",
                color: "#000000",
        }, "fast" );
}
);

});
于 2009-03-05T23:34:56.007 に答える