JQuery 子菜单滑出

Question

我有一个全页高度的垂直导航菜单，我希望子菜单从左侧菜单滑出。

我想知道如何转换/修改我帖子中的 jsfiddle，以便红色区域是主导航列表，灰色区域是子导航列表(悬停时滑出)。

http://jsfiddle.net/1hdtkcpf/

$(".slide").on({
    mouseenter: function() {
        $(this).addClass('hover');
    },
    mouseleave: function() {
        $(this).removeClass('hover');
    },
    click: function() {
        $(this).toggleClass('active');
    }
});

$(document).on('click', function(e) {
    if (!$(e.target).is('.slide') && $('.slide').is('.active')) $('.slide').removeClass('active');
});

红色框为主导航，灰色框为子菜单。

Answer 1

没有提及您的导航将如何构建，因此我使用 ul 来演示一种可能的方法。希望对您有所帮助。

HTML:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>
<div class="slide"></div>

jQuery:

$("#menu li a").on({
  mouseenter: function() {
    $('.slide').addClass('hover');
  },
  mouseleave: function() {
    $('.slide').removeClass('hover');
  },
  click: function() {
    $('.slide').toggleClass('active');
  }
});

CSS:

ul {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
ul li a {
  display: block;
  padding: 5px;
  background: #fff;
  margin-bottom: 2px;
}

演示 here