How to close submenu when clicked outside?

    $(document).ready(function() {

        // DropDown Menu //

        $('.speech').click(function() {

            $('.submenu').children().slideToggle(500);

        });


        // Close all menus on clicking outside //

        $(document).click(function() {

            $('.submenu').hide();

        });

        $('.speech').click(function(e) {

            e.stopPropagation();

        });

    });

codpen: https://codepen.io/Tarun1980/pen/rgQzeO

Nothing seems to open yet on your codepen example. When you get something opening, we can happily explore how to close things.

Sir, it works now, The problem is after the submenu closes when clicked outside, it does not open again. Could you please help me?

When I go to the codepen it shows a heading of English Grammar and several choices below the heading.
Clicking on any of those headings doesn’t seem to achieve anything. Is that how we’re supposed to interact with it?

Sorry for inconvenience ,sir, but the first option, i.e., Parts of Speech does open.

Ahh good one. So clicking on the Parts of Speech heading causes the submenu to open. And clicking on the submenu again causes it to close.

With the submenu open, clicking on the background also causes the submenu to close.

Currently that part of the code is hiding the menu elements. That is not a good thing to do.

Instead, you can just do something similar to what the menus do. Currently the menus use slideToggle to toggle the menus. When you want to close all of the menus. instead of hiding eveything you can just use a similar variation of slideToggle, using slideUp instead.

Sir, after correction, the problem still exists.

That’s because you’re not doing it in the same way that the slideToggle is being done.

Just copy/paste the slideToggle line, rename slideToggle to slideUp, and use that all by itself in the document click function.

1 Like

Thanks a lot. The problem is solved. Very kind of you, sir.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.