CSS/jquery顯示隱藏子菜單

仍試圖找出jQuery，我需要一些幫助與側欄列表。CSS/jquery顯示隱藏子菜單

我在嘗試一些東西后編輯這個。

我想隱藏子菜單，直到特定的列表項被隱藏，然後另一個菜單出現在側邊欄的一側，您可以將鼠標懸停在這些選擇上。我在那裏一半，但當你mouseout它消失之前，你可以鼠標懸停任何項目。我將添加hoverIntent，但我不認爲這是問題，因爲我需要整個隱藏塊來作爲顯示該元素的觸發器。我嘗試了下面的Steerpikes解決方案，但它導致整個主列表在鼠標移出後消失。

這裏現在是結構：

<ul> 
<li>Always Showing Element</li> 
<li class="trigger">Title that triggers Submenu 
<ul> 
<li> 
Hidden Menu 
</li> 
</ul> 
</li> 
</ul>

和腳本

$('li.trigger ul').hide(); 
$('li.trigger').hover(function() { 
$('li.trigger ul').show(); 
}, 
function() { 
     $('li.trigger ul').hide(); 
});

因此，如何能我把它展示，而我的鼠標是在li.trigger UL李elementes？

感謝您的幫助！

沒關係...現在這個工作，我只是有了定位，但現在它重疊了一點，並與hoverintent增加了一點延遲沒有問題。

來源

2009-06-03 Zac

該follwing應該工作。我只寫類似的東西3分鐘前:)

<ul id='menu'> 
<li><a href="">Always showing</a></li> 
<li><a href="">Always showing Title of Submenu</a> 
<ul> 
<li><a href="">Hidden until hover over Title </a></li> 
</ul> 
</li> 

$('#menu li').hover(function() { 
     $(this).find('ul').show(); 
    }, 
    function() { 
     $(this).find('ul').hide(); 
});

記住hover()有兩個參數 - 當你的鼠標會發生什麼，當你的鼠標會發生什麼了。

來源

2009-06-03 22:11:02 Steerpike

嗯..不是爲我工作。當我將鼠標移出整個列表時，消失的不僅僅是子菜單 – Zac 2009-06-03 22:56:26

您可能會發現將根元素設置爲塊級元素並在該上下文中執行事件處理很有用。

來源

2009-06-03 22:19:14

我會考慮使用CSS來做這個功能。由於這是一個菜單，你希望它非常容易訪問。關閉了JavaScript的用戶（也請考慮移動瀏覽器）或使用屏幕閱讀器的用戶將無法使用您的菜單。

嘗試查看：http://www.htmldog.com/articles/suckerfish/dropdowns/

這是多下拉菜單一個CSS的解決方案，應該制定出巨大。

來源

2009-06-04 16:52:55

對於那些誰使用，而不是使用ID級別，這是它爲我的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<div id='menu_box'> 
<ul class='menu'> 
<li><a href="">Always showing</a></li> 
<li><a href="">Always showing Title of Submenu</a> 
<ul> 
<li><a href="">Hidden until hover over Title </a></li> 
</ul> 
</li> 
</ul> 
</div> 
<script> 
$('#menu_box ul li ul').hide(); 
$('#menu_box ul li').hover(function() { 
     $(this).find('ul').show(); 
    }, 
    function() { 
     $(this).find('ul').hide(); 
}); 
</script>

來源

2010-12-21 10:42:14 jrosell

CSS/jquery顯示隱藏子菜單

回答

相關問題