jQuery：懸停鏈接顯示/隱藏div

這似乎是一個初學者問題（我已經搜索了很多，因爲我是JavaScript的初學者），但我仍然無法實現它的工作。有人可以幫我嗎？jQuery：懸停鏈接顯示/隱藏div

我有一個帶有編號鏈接的列表菜單。每個鏈接都有它自己的子菜單，我想在鼠標上顯示/隱藏。鏈接和子菜單以具有相似ID的方式連接。

就像這個...

鏈接：

 

    a id=815 class="menuItem" href="/default____815.aspx">

隱藏的div：

 

    div id="subMenudiv815" class="HoverTopSubMenuBlock" style="display:none">

因爲我有幾個的菜單項我試過循環，當你指定的工作函數手動divs。這是我試過的：

var j = [66,815,1006,9581,1239,1206,816]; 
var menu = []; 
var hoverdiv = []; 
for (var i = 0; i < j.length; i++) { 
    menu[i] = "#"+j[i]; 
    hoverdiv[i] = "#subMenudiv" + j[i]; 
    $(rubrik[i]).hover(function() { 
     $(hoverdiv[i]).show(); 
    }, function() { 
     $(hoverdiv[i]).delay(1000).hide(0); 
    }); 
}

我試過使用each（）函數，但這對我沒有多大幫助。

來源

2013-01-23 user2005500

嗯，你的第二部分發布對我來說沒有任何意義。我建議從簡單開始。如果您想在mouseevent事件上執行_something_，我會首先關注它。您可以使用選擇器$（「a.menuItem」）將鏈接與menuItem鏈接進行匹配。編寫一個jQuery代碼片段，只需使用console.log來記錄你的鼠標懸停。 –

你不需要jQuery來製作下拉菜單。您只能使用html和css。

HTML

<ul id="nav"> 
    <li> 
     <a href="#" title="">Link 1</a> 
    </li> 

    <li> 
     <a href="#" title="">Link 2</a> 
     <ul> 
      <li><a href="#" title="">Sub Link 1</a></li> 

      <li><a href="#" title="">Sub Link 2</a></li> 
     </ul> 
    </li> 
</ul>

CSS

#nav { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 

#nav > li { 
    margin: 0px; 
    padding: 0px; 
    display: inline-block; 
    position: relative; 
} 

#nav > li > a { 
    padding: 0 10px; 
    display: inline-block; 
    background: #cccccc; 
} 

#nav > li:hover > a { 

} 

#nav > li > ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
} 

#nav > li:hover > ul { 
    display: block; 
} 

#nav > li > ul > li { 
} 
#nav > li > ul > li > a { 
    display: block; 
    background: #cccccc; 
    padding: 0 10px; 
} 

#nav > li > ul > li:hover > a { 

}

Demo

下面是關於如何做到這一點的一些信息：

來源

2013-01-23 22:28:34 3dgoo

是的，我想到了，但我的CSS文件已經有點亂了。時間不足。謝謝你的幫助！ – user2005500

有幾件事情我看到：

在錨鏈接
，你需要圍繞價值的ID引號（ID = 「815」而不是id = 815）
如果你想把它們放到一個變量中並且只需調用這個變量來重用它們（菜單[i] = $（「＃」+ j [i]），那麼你需要把jQuery $放在你的選擇器中。）
我不知道你的rubrik [i]是從哪裏來的，但是如果你試圖根據它在dom中的位置調用一個元素，你需要使用「：eq（x）」選擇。就像如果你想抓取HoverTopSubMenuBlock類的第三個元素一樣，你可以用$（「）來獲取它。HoverTopSubMenuBlock：EQ（3）「）

但是，如果我是你，我只想做：

$(".menuItem").hover(function(){ 
    var id = $(this).attr('id'); 
    $("#subMenudiv" + id).show(); 
},function(){ 
    var id = $(this).attr('id'); 
    $("#subMenudiv" + id).delay(1000).hide(); 
});

我認爲會做沒有所有的環路和東西

來源

2013-01-23 22:33:33 dgig

謝謝！最終我找到了答案。 – user2005500

。試試這個...

$('a.menuItem').hover(function(){ 
    $('#subMenudiv' + this.id).show(); 
}, function(){ 
    $('#subMenudiv' + this.id).delay(1000).hide(0); 
});

看到這個Example

問候。

來源

2013-01-23 22:41:38

'.toggle（）'現在被折舊並從1.9中移除 –

@ROYFinley這是切換事件方法，而不是此方法。 – undefined

謝謝！自己找出瞭解決方案。：-）謝謝你的幫助！ – user2005500

感謝您的幫助！

想到一旦我的問題得到解答，我會收到一封電子郵件通知，因此我數次嘗試並獲得解決方案。結束與MG_Bautista建議的幾乎相同的代碼。

$('a.menuItem').hover(function(){ 
    $('#subMenudiv' + this.id).show(); 
}, function(){ 
    $('#subMenudiv' + this.id).delay(1000).hide(0); 
});

來源

2013-01-25 07:56:25 user2005500

jQuery：懸停鏈接顯示/隱藏div

回答

相關問題