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.

This is the problem I have faced

You must make use of the this keyword correctly. Show us your HTML, so that we can help you. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 2, 2016 at 23:19

Jazzman · Accepted Answer · 2016-01-03 10:44:59Z

2

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

edited Jan 3, 2016 at 10:44

answered Jan 2, 2016 at 23:22

Jazzman

1816 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tareq Aziz Over a year ago

yah! I am using the same class .dev_dropdown for both menus. But I want to use like that. Like when I called Bootstrap multiple dropdown menu they all are have the same class.

Jazzman Over a year ago

You can try e.stopPropagation() inside click handlers, right before your code for add/remove class, another think you can try is checking if 'this' is a menu you clicked : instead of else - use else if (ths === e.target)

Jazzman Over a year ago

Third option is, you can pass parameters to each callback function and assign iterated element to your ths variable: .each(function(index, element){ var ths = $(element) }

Jazzman Over a year ago

cause this, inside .each function is an collection of all selected html elements, that mean your register your 'click' event for whole collection. Sorry for that delay between posts but i have weak internet connection here.

Tareq Aziz Over a year ago

Can anyone give me the full worked code I can not understand what to do. I didn't get any specific ans for my question till now. I have told that I am new to jquery.

|

Collectives™ on Stack Overflow

How to create a basic jQuery dropdown menu?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related