jquery: click outside to close menu

Question

I would like to close a menu by clicking outside. This is code. Please keep this code. I want to the menu_list item to that is visible to slideUp before the selected one slidesDown. Then click outside to close menu

<div id="content_wrapper">
<section id="menu">
    <div id="menu_nav">
        <ul class="menu_top">
            <li id="menu_starters" class="menu">STARTERS</li>
            <li id="menu_mains" class="menu">MAINS</li>
            <li id="menu_noodles" class="menu">NOODLES &amp RICE</li>
        </ul>
        <ul id="start_nav" class="menu_sub">
            <li id="st_meat" class="s_menu">MEAT &amp FISH</li>
            <li id="st_veg" class="s_menu">VEGETARIAN</li>
        </ul>
    </div>
    <article id="st_meat_list" class="menu_list">
        <p>Meat</p>
    </article>
    <article id="st_veg_list" class="menu_list">
        <p>Vege</p>
    </article>

JQuery:

   $('.s_menu, .m_menu').click(function(){
    var menuid = event.target.id;
    var mlist = ('#') + (menuid) + ('_list');
    var last = $('.menu_list').not(mlist);


        $(last).slideUp(400, function (){
            $(mlist).slideToggle(400);
        });


        return(false);

  });

Thank you!!!

This question might be helpful if you combine it with a close command http://stackoverflow.com/q/152975/4462191 — camiblanch, Nov 15 '16 at 18:27
It looks like you forgot to include jQuery in your snippet. It's an option on the left hand side when editing your snippet. — BSMP, Nov 15 '16 at 18:32

score 0 · Answer 1 · answered Nov 15 '16 at 20:40

Working jsfiddle

You should listen a click event on document, that would solve your problem.

HTML

<div id="content_wrapper" style="width:30%; background:red">
<section id="menu">
    <div id="menu_nav">
        <ul class="menu_top">
            <li id="menu_starters" class="menu">STARTERS</li>
            <li id="menu_mains" class="menu">MAINS</li>
            <li id="menu_noodles" class="menu">NOODLES &amp RICE</li>
        </ul>
        <ul id="start_nav" class="menu_sub">
            <li id="st_meat" class="s_menu">MEAT &amp FISH</li>
            <li id="st_veg" class="s_menu">VEGETARIAN</li>
        </ul>
    </div>
    <article id="st_meat_list" class="menu_list">
        <p>Meat</p>
    </article>
    <article id="st_veg_list" class="menu_list">
        <p>Vege</p>
    </article>

Javascript

   $(window).click(function() {
        $("#content_wrapper").slideToggle(400);
});


   $('.s_menu, .m_menu').click(function(){
    var menuid = event.target.id;
    var mlist = ('#') + (menuid) + ('_list');
    var last = $('.menu_list').not(mlist);


        $(last).slideUp(400, function (){
            $(mlist).slideToggle(400);
        });


        return(false);
                event.stopPropagation();
  });

jquery: click outside to close menu

1 Answers1