2009-06-25 20 views
1

基本的に、サブメニューの要素にカーソルを合わせている間、下の矢印の最上位のカテゴリ画像をオンにしています。私はホバー機能でjQueryを使ってこれをやってみたいですが、私の人生のためにサブメニュー項目をターゲットにするセレクターを得ることはできません。私は私がターゲットとするセレクタを把握することはできません言ったようjQueryのセレクタを見つけることができません

http://www.seth-duncan.com/Test/TestMenu.html

しかし:このドロップダウンメニューで

$(document).ready(function() { 
    $('.sub ul > li').hover(function() { 
     $(this).parents('a.sub').attr('src', 'images/DownArrow.png'); 
}, 
function(){ 
    $(this).parents('a.sub').attr('src', 'images/DownArrowOff.png'); 
    }); 
}); 

:ここ

は、私が実行しようとしていますコードですこれらのサブメニュー項目は画像のsrcを変更することができます。

これは(私はそれが私は、このタスクを達成するために持っている方法ではなく、作品を知っている私を信じて)いないCSS経由のjQueryを通じて任意およびすべてのヘルプのための

感謝を行わなければなりません。

答えて

2

-Seth

私は画像をその場で追加されたという事実は、それらがjQueryのによって発見されたと干渉すると思います。あなたがlive()とイベントを縛らない限り、彼らは逃したと思う。

それは私がそれを働かせる方法です。

$(document).ready(function(){ 
    var downArrow = '/Test/images/DownArrow.png'; 
    var downArrowOff = '/Test/images/DownArrowOff.png'; 

    $("#menu li a.sub").hover(function() { 
     $(this).find('img').attr('src',downArrow); 
    }, function() { 
     $(this).find('img').attr('src',downArrowOff); 
    }); 
    $("#menu li ul").hover(function() { 
     $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrow); 
    }, function() { 
     $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrowOff); 
    }); 
}); 
2

問題は、あなたが欲しいと思っているあなたのセレクターにあります。 $( 'sub ul> li')のセレクタは、subのクラスを持つ要素の中のul要素を探しています。あなたのul要素は、実際にはクラスsubの兄弟です。セレクタを$( 'sub〜ul> li')のように変更すると、すべてのliが正しくターゲットになります。

さて、掲載artlungものを使用して、矢印画像まで戻って得るためにあなたのセレクタは次のようになります。あなたが画像を取得

$(this).parents('li:has(a)').children('a.sub').find('img') 

たら、あなたはあなたが好きしかし、属性を変更することができます。

関連する問題