jquery：点击外部关闭菜单

Question

我想通过点击外部关闭菜单。 这是代码。请保留此代码。我希望menu_list项目在选定的一个slidesDown之前对slideUp可见。然后点击外关闭菜单

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

    }); 

谢谢！

Answer 1

Working jsfiddle

你应该听文件上点击事件，这将解决您的问题。

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