1

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

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

我的页面中有多个按钮，单击时需要在创建单击事件的按钮下显示此菜单（类似于上下文菜单）。有没有更有效的方法来做到这一点，而不是在我的每个按钮下隐藏这个 div，在点击时显示这个 div 或者做 Ajax 调用服务器（需要一些时间）每次都呈现这个内容。我在想是否有更好的解决方案可以将这个 div 隐藏在页面中的某个位置，并在触发事件时在控件下使用 jquery/JS 显示它。

4

1 回答 1

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/

于 2013-01-02T01:06:22.117 回答