jQuery子菜单滑动显示

黑色简洁风格的导航菜单，配上滑动展开的子菜单，用 jQuery 来搞挺顺手的。是.hover()配.slideToggle()这一套，响应也快，代码也简单。你只要搞清楚 HTML 结构，把.sub-menu都藏起来，剩下的交给事件监听就行了。

jQuery 的$()语法确实方便，选元素、绑定事件、改样式一把梭。而.stop()这个方法也别小看，防止动画堆叠有用。你可以直接这样写：

$(document).ready(function() {
  $('.parent').hover(
    function() {
      $(this).children('.sub-menu').stop().slideToggle('fast');
    },
    function() {
      $(this).children('.sub-menu').stop().slideUp('fast');
    }
  );
});

像这种结构清晰的ul-li嵌套，适合做响应式导航。用户鼠标一碰就能看到子项，体验确实好不少。你要是嫌slideToggle太快，还能自己调成300、500毫秒，调起来挺灵活。

哦对了，网上也有些不错的源码可以直接用，你可以看看这些：

• jquery 下拉子菜单导航菜单代码.zip
• jquery 导航菜单
• jQuery 导航菜单

如果你项目里正好有导航需求，不妨试试这种方式。简单、兼容性也不错，jQuery 在这类交互场景下还是蛮给力的。