Question

我想点击外面关闭菜单。这是代码。请保留此代码。我希望在选定的slideDown之前，slideUp可以看到menu_list项目。然后单击外部关闭菜单

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

jquery：点击外面关闭菜单

1 个答案: