트리거 제어 아래에 표시되는 드롭 다운 메뉴

Question

아래와 비슷한 태그가있는 드롭 다운 유형 메뉴 div가 있습니다. 이 메뉴는 한 번만 표시되는 톱 메뉴가 아닙니다.

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

내 페이지에는 클릭 이벤트가 발생한 버튼 (상황에 맞는 메뉴) 아래에이 메뉴가 표시되어야하는 여러 개의 버튼이 있습니다. 이 div를 클릭하면이 div가 표시되는 각 단추 아래에이 div를 숨기는 것 외에 다른 작업을 수행하는보다 효율적인 방법이 있습니까? 아니면 서버에 Ajax 호출을 할 때마다 (시간이 걸립니다)이 내용이 항상 렌더링됩니다. 이 div를 페이지의 어딘가에 숨기고 jquery/JS를 사용하여 이벤트가 트리거 될 때 컨트롤 아래에 더 나은 솔루션이 있는지 생각하고 있습니다.

Answer 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/