jquery中的垂直下拉菜單

Question

我想在點擊div時顯示垂直下拉菜單。假設我有一個圖像元素的div元素

<div id="menu"><img src="image.png">Menu</div> 

，HTML DOM的我都榜上有名UL元素

<div id="somediv"> 
<ul id="menulist"> 
<li>Item one 
    <ul> 
     <li>Subitem one</li> 
     <li>Subitem two</li> 
    </ul> 
</li> 
<li>Item two</li> </ul> </div> 

我在尋找一個jQuery插件，可以顯示掇內其他地方下拉菜單當我說$（「＃菜單」）點擊 - >菜單列表的顯示元素的圖像作爲下一個菜單

任何幫助將appriciated

Answer 1

它可以這樣簡單。

$('#menu').click(function(){ 
    var $somediv = $('#somediv'); 
    if($somediv.is(':visible')){ 
     $somediv.hide(); 
    } 
    else{ 
     var $this = $(this); 
     $('#somediv').css({ 
      top: $this.offset().top + $this.height(), 
      left: $this.offset().left, 
      position: 'absolute'//this can be set using css 
     }).show(); 
    } 
}); 

Answer 2

爲什麼你需要一個插件嗎？這應該是相對容易的編碼。只需用戶在jQuery中使用.hide,.show或.toggle屬性來切換列表在點擊該div時的可見性。如果您希望它是一個上下文菜單（右鍵單擊可見），那麼它需要多一點工作，但要注意，當您接管右鍵單擊功能時，大多數人會討厭它。