jquery - 在触发控制下显示的下拉菜单

Question

我有一个下拉式菜单 div，带有类似于下面的标签。这不是只显示一次的顶级菜单。

<div id=”statusmenu”>
<ul>
<li>menu Item#1</li>
<li>menu Item#2</li>
</ul>
</div>

我的页面中有多个按钮，点击时需要在创建点击事件的按钮下方显示此菜单(类似于上下文菜单)。除了将此 div 隐藏在单击时显示此 div 的每个按钮下或对服务器进行 Ajax 调用(需要一些时间)每次都呈现此内容之外，是否有更有效的方法来执行此操作。我在想是否有更好的解决方案将这个 div 隐藏在页面的某个位置，并在事件触发时使用控件下的 jquery/JS 显示它。

Answer 1

首先，您不能创建该 div 的多个实例，因为您只能拥有唯一的 ID。因此，您可能希望它是一个类名，例如 class="statusmenu"。此外，您如何知道将该菜单放在哪些元素下方？也许通过用 class="status" 标记它们？如果是这种情况，那么您可以使用它来应用菜单:

$(document).on("click",'.status',function(){
 if($(this).find('.statusmenu').length == 0){
  var d = document.createElement("div");
  d.setAttribute("class","statusmenu");
  var ul = document.createElement("ul");
  var li1 = document.createElement("li");
  li1.innerHTML = "menu Item#1";
  var li2 = document.createElement("li");
  li2.innerHTML = "menu Item#2";
  ul.appendChild(li1);
  ul.appendChild(li2);
  d.appendChild(ul);
  $(d).hide();
  this.appendChild(d);
  $(d).slideDown();
 }else{
  $(this).find('.statusmenu').slideUp('fast',function(){ $(this).remove() });
 }
});​​​​​​​​​​​​​​

jsfiddle 演示:http://jsfiddle.net/jakVp/