jquery：點擊外部關閉菜單

我想通過點擊外部關閉菜單。這是代碼。請保留此代碼。我希望menu_list項目在選定的一個slidesDown之前對slideUp可見。然後點擊外關閉菜單jquery：點擊外部關閉菜單

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

    });

謝謝！

來源

2016-11-15 thanh duong

如果你關閉命令http://stackoverflow.com/q/152975/4462191 – camiblanch

結合起來這個問題可能會有所幫助它看起來像你忘了在你的代碼片段中加入jQuery。編輯代碼片段時，它是左側的選項。 – BSMP

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

來源

2016-11-15 20:40:55 yakutsa

jquery：點擊外部關閉菜單

回答

相關問題