Question

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

我想知道如何在我的帖子中转换/修改jsfiddle，因此红色区域是主导航列表，灰色区域是子导航列表（在悬停时滑出）。

$(".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

JQuery子菜单滑出

1 个答案: