서로 간섭하는 여러 개의 jquery 드롭 다운 상자를 피하는 방법

Question

동일한 드롭 다운을 여러 페이지에 적용하려면 코드를 변경하는 방법을 알아야합니다. 페이지에서의 드롭 다운 수는 데이터베이스에서 동적으로 작성되기 때문에 다양합니다. 그 기능은 jquery에 의해 제공됩니다. 각 드롭 다운을 다른 사람들과 독립적으로 작업하고 싶습니다. 여기

<div class="wrapper-demo"> 
    <div id="dd" class="wrapper-dropdown-2" tabindex="1">Dropdown 
     <ul class="dropdown"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
</div> 

<div class="wrapper-demo"> 
    <div id="dd" class="wrapper-dropdown-2" tabindex="1">Dropdown 
     <ul class="dropdown"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
</div> 

는 자바 스크립트입니다 : 여기 http://jsfiddle.net/Pj5rE/

되는 HTML이다 : 그것은 그래서 여기 정말 길어 내 바이올린에 대한 링크입니다 나는 어 CSS를 게시하는 경우는

아래 코드는하지만 확실하다 :

function DropDown(el) { 
    this.dd = el; 
    this.initEvents(); 
} 
DropDown.prototype = { 
    initEvents : function() { 
     var obj = this; 

     obj.dd.on('click', function(event){ 
      $(this).toggleClass('active'); 
      event.stopPropagation(); 
     }); 
    } 
} 

$(function() { 
    var dd = new DropDown($('#dd')); 
     $(document).click(function() { 
      // all dropdowns 
     $('.wrapper-dropdown-2').removeClass('active'); 
     }); 

}); 

나는 꽤 프로그래밍과 자바 스크립트에 익숙하기 때문에 모든 의미에서 바랬다. 전체 또는 부분적으로 도움이 많이 감사합니다, 감사합니다!

Answer 1

난 당신이 프로토 타입을하려는 이유를 잘 모르겠지만, 당신이 원하는 행동이 무슨 말을하는지에 따라,이 시도 :

HTML

<div class="wrapper-demo"> 
    <div class="wrapper-dropdown-2" tabindex="1">Dropdown 
     <ul class="dropdown"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
</div> 

<div class="wrapper-demo"> 
    <div class="wrapper-dropdown-2" tabindex="1">Dropdown 
     <ul class="dropdown"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
</div> 

스크립트

에게

$(function() { 

     $('div.wrapper-dropdown-2').click(function(e) { 
      e.preventDefault(); 
      if($(this).hasClass('active')) 
      { 
       $(this).removeClass('active'); 
      } 
      else 
      { 
       $(this).addClass('active'); 
      }   
    }); 
}); 

참조 바이올린 :

http://jsfiddle.net/Pj5rE/4/