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

まず、一意の ID しか持てないため、その div の複数のインスタンスを作成することはできません。そのため、代わりに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 に答える