Как навести курсор на элементы одного списка и отобразить элементы другого списка?

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> 

и это JavaScript

$(function(){ 

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

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

     }, function(){ 

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

     }); 

    }); 

Я пытаюсь заставить его работать, где парит над Link 1 показывает выход 1 и парит над Link 2 показывает выход 2, и т.д. Но прямо сейчас неважно, на какую навигационную ссылку я нависаю, вывод 1 всегда показывает. Кроме того, я не могу изменить разметку, потому что у меня нет доступа к шаблону, я могу только изменить CSS/JS. Я думаю, что в моем скрипте отсутствует что-то простое, так что ссылка 1 соответствует Output 1, Link 2 с выходом 2 и т. Д., Но я не могу понять это. Тип нового для сценариев. Благодарю.

Также мне нужно что-то сделать, чтобы убедиться, что каждая ссылка и соответствующая линия вывода совпадают друг с другом? (Вывод под ссылкой при наведении) Я пытаюсь сделать это как выпадающее меню.

Answer 1

Это потому, что $('.output li').css('visibility', 'visible') выберет все элементы li внутри .output и сделает их видимыми. Вы должны в основном сделать только соответствующий ли видимый и скрыть все остальные. Проверьте код, который я исправил, а также добавил комментарии для вашего понимания.

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