如何避免多個jquery下拉框干擾彼此

-1

我需要知道如何更改我的代碼以使多個下拉菜單在同一頁上工作。頁面上的下拉列表的數量會有所不同，因爲它們是從數據庫動態創建的。他們的功能是由jquery提供的。我希望每個下拉菜單獨立於其他菜單。如何避免多個jquery下拉框干擾彼此

代碼如下，但不知道我是否應該張貼誒CSS，因爲它真的很長，所以這裏是鏈接到我的小提琴：http://jsfiddle.net/Pj5rE/

下面是HTML：

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

這裏是JavaScript ：

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'); 
     }); 

});

我很新的編程和JavaScript，所以我希望一切都有道理。非常感謝全部或部分幫助，謝謝！

來源

2014-02-28 JackBurton

你不能讓id具有相同的值，它們需要是唯一的。另外，我不確定我是否瞭解所需的行爲。你是否希望通過點擊任何其他下拉菜單來使所有下拉菜單變爲活動狀態，還是隻是試圖爲所有下拉菜單設置單個行爲。你可以請合格嗎？ –

我希望每個人的下拉列表獨立於其他人。我意識到id現在需要有所不同，但是我怎麼才能讓它們全部工作，因爲現在JavaScript似乎正在通過id來調用下拉菜單。 – JackBurton

我不知道爲什麼你要這個原型，而是基於你在說什麼你想要的行爲，試試這個：

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/

來源

2014-02-28 19:23:56

謝謝。這工作就像我本來打算的。原型內容來自我正在遵循的教程。 – JackBurton

沒問題，很樂意幫忙。 –

如何避免多個jquery下拉框干擾彼此

回答

相關問題