制作子菜单滑动关闭在正确的时间使用jQuery

Question

请参见本小提琴作品链接http://jsfiddle.net/rabelais/ktn425c6/6/

var $menu = $('#menu'); 

$menu .click(function() { 
if ($('#igna-1').css('display') != 'none') { 
    $('#igna-1').slideToggle("fast", function() { 
     $('#igna-2').animate({ left: 'hide' }, 300, function() { 
      $('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() { 
       $('#fatal').animate({ left: 'hide' }, 300); 
      }); 
     }); 
    }); 
} else if ($('#fatal').css('display') == 'none') { 
    $('#fatal').animate({ left: 'toggle' }, 300, function() { 
     $('#igna, #black, #dazed, #sons, #mad, #stimp').slideToggle("fast"); 
    }); 
} 

1.Clicking进一步打开链接。

2.点击DAZED打开一个子菜单。

3.当你再次点击WORK时，这两个菜单都会打开，两个菜单同时关闭（这在我的浏览器上发生，但由于某种原因不在这个小提琴上？您可以看到完整的站点here）

我的问题：而不是他们关在一起我需要子菜单首先折叠，然后第一个菜单。这种影响对IGNA和MAD LONDON子菜单已经起作用。

请帮忙。谢谢。

Answer 1

我会做你的菜单系统是这样的（HTML更改，因此它是一个比较语义正确与子链接嵌套）：

$('#menu li').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    var li = $(this), 
 
     subMenu = li.children('ul').eq(0); 
 
    
 
    li.addClass('clicked'); 
 
    
 
    if (subMenu.length) { 
 
     e.preventDefault(); 
 
     
 
     if (subMenu.is(':visible')) { 
 
      closeMenu(subMenu); 
 
     } else { 
 
      li.siblings().children().not(subMenu).children('li').not(':last-child').slideUp('fast', function() { 
 
       $(this).parent().animate({ left: 'hide' }, 300); 
 
      }); 
 
      
 
      subMenu.animate({ left: 'show' }, 300, function() { 
 
       subMenu.children('li').not(':last-child').slideDown('fast'); 
 
       console.log('open click removed'); 
 
       li.removeClass('clicked'); 
 
      }); 
 
     } 
 
    } 
 
}); 
 

 
function closeMenu(menu) { 
 
    var subMenu = menu.children('li').children('ul:visible').eq(0); 
 
    if (subMenu.length) { 
 
     closeMenu(subMenu); 
 
    } else { 
 
     var children = menu.children('li').not(':last-child'); 
 
     children.each(function(index) { 
 
      if (index == children.length - 1) { 
 
       var parentLi = menu.parent('li'); 
 
       $(this).slideUp('fast', function() { 
 
        menu.animate({ left: 'hide' }, 300, function() { 
 
         if (parentLi.length && !parentLi.hasClass('clicked')) { 
 
          console.log(parentLi.hasClass('clicked')); 
 
          closeMenu(parentLi.parent()); 
 
         } else { 
 
          parentLi.removeClass('clicked'); 
 
          console.log('close click removed'); 
 
         } 
 
        }); 
 
       }); 
 
      } else { 
 
       $(this).slideUp('fast'); 
 
      } 
 
     }); 
 
    } 
 
} 
 
     

#menu, #menu ul, #menu li { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#menu, #menu ul { 
 
    display:inline-block; 
 
} 
 
#menu { 
 
    position:fixed; 
 
    bottom:34px; 
 
    left:0; 
 
} 
 
#menu ul { 
 
    position:absolute; 
 
    bottom:0; 
 
    display:none; 
 
    z-index:1; 
 
} 
 
#menu li { 
 
    display:block; 
 
    white-space:nowrap; 
 
    position:relative; 
 
} 
 
#menu a { 
 
    position:relative; 
 
    z-index:2; 
 
    background:#ffffff; 
 
} 
 

 
#menu .level1 { 
 
    left:100px; 
 
} 
 
#menu .level2 { 
 
    left:200px; 
 
} 
 

 
#menu .level1 li { 
 
    display:none; 
 
} 
 
#menu .level1 li:last-child { 
 
    display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
    <li> 
 
     <a href="#">Work</a> 
 
     <ul class="level1"> 
 
      <li class="hidden hover" id="dazed"> 
 
       <a href="#">Dazed</a> 
 
       <ul class="level2"> 
 
        <li class="hidden hover" id="dazed-1"><a href="#">Dazed<span class="pad">x</span>Amazon</a></li> 
 
        <li class="hidden hover" id="dazed-2"><a href="#">Dazed Media Re-brand</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="hidden hover" id="mad"> 
 
       <a href="#">MAD London</a> 
 
       <ul class="level2"> 
 
        <li class="hidden hover mad" id="mad-1"><a href="#">Apple</a></li> 
 
        <li class="hidden hover mad" id="mad-2"><a href="#">Every Breaking Wave</a></li> 
 
        <li class="hidden hover mad" id="mad-3"><a href="#">Films Of Innocence</a></li> 
 
        <li class="hidden hover mad" id="mad-4"><a href="#">Holiday E-Card</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="hidden hover" id="sons"><a href="#">Sons<span class="jaap">+</span>Daughters</a></li> 
 
      <li class="hidden hover" id="stimp"><a href="#">STIMPWHTWTIIIF</a></li> 
 
      <li class="hidden hover" id="black"><a href="#">Graham Fan</a></li> 
 
      <li class="hidden hover" id="igna"> 
 
       <a href="#">Inga Nemirovskaia</a> 
 
       <ul class="level2"> 
 
        <li class="hidden hover" id="igna-1"><a href="#">S/S <span id="ss">15</span></a></li> 
 
        <li class="hidden hover" id="igna-2"><a href="#">A/W 14</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="hidden hover" id="fatal"><a href="#">Vincenzo Laera</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>