0

ナビゲーションバーのアイテムの背景画像のアニメーションを処理する次のスクリプトがあります。

$j(function() {
   $j(".menu-item").find(".bottom_nav").hover(function () {
      $j(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});

これは正常に機能しますが、ナビゲーションアイテムにサブメニューがあり、ユーザーがサブメニューにカーソルを合わせたときに、この関数の2番目のアニメーションを起動したくない場合、つまりbackgroundPositionを「0px35px」のままにしておきたい場合を除きます。これはそのままで機能しますが、サブメニューは.bottom_navdivの外にあります。メニュー/サブメニューのマークアップの構造はWordpressテーマによって処理され、これを変更する方法がわかりません。マークアップのアイデアを示すスクリーンショットは次のとおりです。

ここに画像の説明を入力してください

ご覧のとおり<ul class="sub-menu">、.bottom_navdivの外側にあります。

このページで、動作中のナビゲーションアイテムを確認できます。ナビゲーションバーの2番目の項目「ニュース」にはドロップダウンサブメニューがあります。このサブメニューにカーソルを合わせたときに、ナビゲーション項目「ニュース」の背景色を緑色のままにします。

4

1 に答える 1

0

以下を追加して、これをソートしました。

$j(function() {
   $j(".sub-menu").hover(function () {
      $j(this).closest('.menu-item').find(".bottom_nav").stop().animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).closest('.menu-item').find(".bottom_nav").stop().animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
});
于 2012-07-14T18:47:45.907 に答える