如何创建一个基本的jQuery下拉菜单？

Question

我是jQuery的新手，并为我自己的项目创建了一个下拉菜单的插件。我在下面有这个Javascript代码：

(function($){
$.fn.dev_dropdown = function(o, callback) {
    var defaults = {
        after: function(e) {},
        during: function(e) {},
        before: function(e) {},
        afterEachAnimation: function(e) {}
    }
    if(typeof callback == 'function') {
        defaults.after = callback;
    }
    var o = $.extend(defaults, o || {});
    return this.each(function() {
        var ths = $(this),
            childUL = ths.children("ul");

        ths.off('click').on('click', function(e){
            if(!ths){
                childUL.removeClass('dev_dropdown_open');
            }
            else {
                childUL.addClass("dev_dropdown_open");
            }
            return false;
        });

        $(document).on('click', function(){
            childUL.removeClass('dev_dropdown_open');
        });
    });
}
})(jQuery);

这是我的CSS：

.dev_dropdown {
    position: relative;
    float: left;
}

.dev_dropdown > ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; /* dropdown left or right */
    z-index: 1000;
    min-width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #1976d2;
}

.dev_dropdown .dev_dropdown_open {
    display: block;
}

.dev_dropdown .dev_dropdown_open li {
    width: 100%;
    display: block;
}

.dev_dropdown .dev_dropdown_open li a {
    display: block;
    padding: 10px;
    color: #999;
    text-decoration: none;
}


.dev_dropdown .dev_dropdown_open li a:hover {
    background: #f4f4f4;
    color: #000;
}

这是我的HTML

    <div class="page_content">
        <div class="page_content_inner">
            <div class="col_3">
                <div class="dev_card">
                    <div class="dev_card_toolbar">
                        <div class="toolbar_action">
                            <ul>
                                <li class="dev_dropdown">
                                    <a class="riplink" href="#"><i class="devs devs-more-vert"></i></a>
                                    <ul>
                                        <li><a href="#">item</a></li>
                                        <li><a href="#">item</a></li>
                                        <li><a href="#">item</a></li>
                                        <li><a href="#">item</a></li>
                                    </ul>
                                </li>
                                <li><a class="riplink" href="#"><i class="devs devs-fullscreen"></i></a></li>
                            </ul>
                        </div>
                        Directory
                    </div>
                    <div class="dev_card_content">

                    </div>

                </div>

            </div>
            <div class="col_9">
                <div class="dev_card">
                    <div class="dev_card_toolbar">
                        <div class="toolbar_action">
                            <ul>
                                <li class="dev_dropdown">
                                    <a class="riplink" href="#"><i class="devs devs-more-vert"></i></a>
                                    <ul>
                                        <li><a href="#">item</a></li>
                                        <li><a href="#">item</a></li>
                                        <li><a href="#">item</a></li>
                                        <li><a href="#">item</a></li>
                                    </ul>
                                </li>
                                <li><a class="riplink" href="#"><i class="devs devs-fullscreen"></i></a></li>
                            </ul>
                        </div>
                        Directory
                    </div>
                    <div class="dev_card_content">
                        sddfggf
                    </div>

                </div>
            </div>
        </div>
    </div>

当我点击另一个下拉菜单时，两个下拉菜单同时显示。请帮帮我。

Answer 1

看起来你在两个菜单中都使用相同的类，我猜它是.dev_dropdown，每个菜单使用不同的类，如果不是理由，你的HTML代码会有所帮助。
另一种方法是使用.each回调函数中的元素参数将click事件处理程序单独绑定到每个元素，该函数是对集合中当前元素的引用。并且还使用'e.stopPropagation'

防止事件冒泡到父元素

return this.each(function(i, element) {
        var ths = $(element),
            childUL = ths.children("ul");

        ths.off('click').on('click', function(e){
            e.stopPropagation();
            if(!ths){
                childUL.removeClass('dev_dropdown_open');
            }
            else {
                childUL.addClass("dev_dropdown_open");
            }
            return false;
        });

        $(document).on('click', function(){
            childUL.removeClass('dev_dropdown_open');
        });
    });