1つのリストの要素にカーソルを置き、別のリストの要素を表示するにはどうすればよいですか？

Question

私はなど、リンク1の上にマウスを移動すると、出力1を示し、リンク2の上にマウスを移動すると、出力2を示しており、それを動作させるためにしようとしているこのHTML

<ul class="nav"> 
<li>Link 1</li> 
<li>Link 2</li> 
<li>Link 3</li> 
</ul> 

<ul class="output"> 
<li>Content and output here 1</li> 
<li>Content and output here 2</li> 
<li>Content and output here 3</li> 
</ul> 

とこのJavaScript

$(function(){ 

     $(".nav li").hover(function(){ 

      $(this).addClass("hover"); 
      $('.output li').css('visibility', 'visible'); 

     }, function(){ 

      $(this).removeClass("hover"); 
      $('.output li').css('visibility', 'hidden'); 

     }); 

    }); 

を持っていますしかし、今は、ナビリンクがどのホバー上にあるかは関係ありません。出力1は常に表示されます。また、テンプレートへのアクセス権がないためマークアップを変更できません。CSS/JSのみを変更できます。私はリンク1が出力1、リンク2が出力2などと一致するようにスクリプトで単純なものが欠けていると思いますが、それはわかりません。スクリプティングの新しいもの。ありがとう。

また、各リンクと対応する出力が互いに整列していることを確認するために何かする必要がありますか？ （ホバー上のリンクの下に出力）私はドロップダウンメニューのようにしようとしています。

Answer 1

$('.output li').css('visibility', 'visible')はのすべてのli要素を選択して表示するためです。あなたは基本的に対応するliのみを表示させ、他は隠す必要があります。私が修正したコードをチェックし、あなたの理解のためにコメントを追加しました。

$(function(){ 
    $(".nav li").hover(function(){ 
     $(this).addClass("hover"); 
     $('.output li') 
     .css('visibility', 'hidden')//Hide all the li's 
     .eq($(this).index())//Get the li at same index which triggered hover 
     .css('visibility', 'visible');//Make it visible 
    }, function(){ 
     $(this).removeClass("hover"); 
     $('.output li').css('visibility', 'hidden'); 
    }); 

}); 

.index()方法は、その兄弟要素にjQueryオブジェクトの相対内の最初の要素の位置を示す整数を返します。

.eq(index)は、一致する要素のセットを指定されたインデックスの要素に減らします。私は、他のアプローチと気づいた

の作業Demo

Answer 2

一つの問題は、彼らがリストに表示されて表示されている出力李につながるということです。これがコードの望ましい動作であるとは思えない。

だから、ホバー作業を取得するには、 ".OUTPUT李" スタイルになります。代わりに、可視性のスタイルを変更するのでショーを使用して

.output li {display:none;} 

、スクリプト（）および非表示（）を：

$(function(){ 
    $('.nav li').hover(function(){ 
     $(this).addClass('hover'); 
     var linkId = $(this).index(); 
     $($('.output li')[linkId]).show(); 
    }, function() { 
     $(this).removeClass('hover'); 
     var linkId = $(this).index(); 
     $($('.output li')[linkId]).hide(); 
    }); 
}); 

Answer 3

マークアップを一切変更できない場合は、.index()メソッドを使用して、ホバリングされた要素のインデックスを見つけて、それを表示する要素のインデックスに関連付ける必要があります。ドロップダウンメニューの効果を作成しようとしているならば、あなたは離れてメインメニューアイテムからマウスを移動したり、あなたがクリックすることができませんとき出力部を非表示にしたくないことを

注意サブメニューでこのことを念頭に置いて、これは事実上a question I answered a few days agoと同じ要件であると

。ここでは、その質問のために投稿したコードのバージョンがあります。メインメニューの上にマウスを置いた後、サブメニューが表示されたままになっているので、サブメニューが消える前にマウスを移動する時間があります。 ：

var timerId, 
    $mainMenuItems = $(".nav li"), 
    $subMenus = $(".output li"); 

$mainMenuItems.hover(
    function(){ 
     clearTimeout(timerId); 
     $subMenus.hide(); 
     $($subMenus[$mainMenuItems.index(this)]).hide() 
               .removeClass('hidden') 
               .show(); 
    }, function(){ 
     var i = $mainMenuItems.index(this); 
     timerId = setTimeout(function(){$($subMenus[i]).hide();},500); 
    } 
); 
$subMenus.hover(
    function() { 
     clearTimeout(timerId); 
    }, 
    function() { 
     $(this).hide(); 
    } 
); 

の作業のデモ：http://jsfiddle.net/4mgXh/

むしろ明示的visibilityプロパティを設定するよりも、私はちょうど.hide()と.show()を使用しています。

（これはあなたが尋ねたものを超えていることを実感していますが、私は次の問題を解決すると思っていますし、コードから時間切れのものを取り除くこともできません。 my other answerをご覧ください）