How to create a basic jQuery dropdown menu?

Question

I am very new to jQuery and creating a plugin for dropdown menu for my very own project. I have this Javascript code below:

(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);

This is my 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;
}

And this is my 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>

When I click another dropdown menu both dropdown menus are showing at the same time. Please help me out.

Answer 1

It's looks like you are using the same class in both menus, I'm guessing it is .dev_dropdown, use different class per menu, if it's not a reason, your HTML code will be helpful.
Another way is binding click event handler to each element alone, using element parameter in .each callback function, which is reference to current element from collection. And also prevent event from bubbling to parent elements using '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');
        });
    });