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时的可见性。如果您希望它是一个上下文菜单（右键单击可见），那么它需要多一点工作，但要注意，当您接管右键单击功能时，大多数人会讨厌它。