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/

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

1 个答案: