如何將鼠標懸停在一個列表的元素上並顯示另一個列表的元素？

-1

<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顯示輸出1和懸停在鏈接2顯示輸出2，等等。但現在，懸停的導航鏈接無關緊要，輸出1始終顯示。另外，我無法更改標記，因爲我無法訪問模板，所以我只能更改CSS/JS。我想我在我的腳本中丟失了一些簡單的東西，以便鏈接1與輸出1，鏈接2與輸出2等匹配，但我無法弄清楚。一些新的腳本。謝謝。

我也需要做任何事情以確保每個鏈接和相應的輸出相互排列？（懸停下的鏈接下方的輸出）我試圖使它像一個下拉菜單。

來源

2012-02-10 user1074378

這是因爲$('.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

來源

2012-02-10 01:42:32 ShankarSangoli

一個問題是，它們會導致輸出裏，因爲它們出現在列表中顯示。我覺得這不太可能是代碼的期望行爲。用show（）和隱藏（），而不是改變可見樣式

.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(); 
    }); 
});

來源

2012-02-10 01:53:25 Condiment

因此，要獲得懸停工作，你會式「.OUTPUT禮」

如果您根本無法更改標記，則需要使用.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）

來源

2012-02-10 01:55:28 nnnnnn

如何將鼠標懸停在一個列表的元素上並顯示另一個列表的元素？

回答

相關問題