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 demo：http://jsfiddle.net/jakVp/

在触发控件下显示的下拉菜单

1 个答案: