한 목록의 요소를 가리키고 다른 목록의 요소를 표시하는 방법은 무엇입니까?

Question

나는이 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> 

이 자바 스크립트를 가지고

내가 링크 한 유혹하는 출력 1과 링크 2 위로 마우스를 보여줍니다 어디 작동하게하기 위해 노력하고있어

$(function(){ 

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

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

     }, function(){ 

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

     }); 

    }); 

출력 2 등을 보여줍니다 하지만 지금 당장은 어떤 nav 링크를 가리키더라도 상관 없습니다. 출력 1은 항상 나타납니다. 또한 템플릿에 액세스 할 수 없어 마크 업을 변경할 수 없으며 CSS/JS 만 변경할 수 있습니다. 나는 Link 1이 Output 1, Link 2가 Output 2 등과 일치하도록 스크립트에서 간단한 것을 잃어 버렸다고 생각한다. 그러나 나는 그것을 이해할 수 없다. 새로운 스크립팅 방법. 감사.

또한 각 링크와 해당 출력이 서로 일치하도록하려면 무엇인가해야합니까? (호버에 링크 아래에 출력) 나는 드롭 다운 메뉴처럼 그것을 만들려고 노력하고있어.

Answer 1

$('.output li').css('visibility', 'visible')은 .output 내의 모든 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

하나의 문제는 그들이 목록 내에 표시로 표시되는 출력 리튬을 초래할 것입니다. 이것이 코드의 바람직한 동작이 될 것 같지는 않습니다.

$(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

: 가시성 스타일 쇼()와 숨기기 (사용) 대신 변경

.output li {display:none;} 

그리고 스크립트를

그래서 호버 작업을 진행하려면 "· 출력 리튬을"스타일을 것입니다

마크 업을 전혀 변경할 수없는 경우 .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보기)