如何避免多个 jquery 下拉框相互干扰

Question

我需要知道如何更改我的代码以使多个下拉菜单在同一页面上工作。页面上的下拉菜单数量会有所不同，因为它们是从数据库动态创建的。它们的功能由 jquery 提供。我希望每个下拉菜单都独立于其他下拉菜单工作。

代码在下面，但不确定我是否应该发布 eh 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 还很陌生，所以我希望一切都有意义。非常感谢您提供全部或部分帮助，谢谢！

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/