javascript - 带有可滑动子菜单容器的菜单

Question

我用 UL、LI 定义了菜单...最多有一个子菜单:

ul
  li: item 1
  li: item 2
    ul
      li: item 2.1
      li: item 2.2
  li: item 3
    ul
      li: item 3.1
      li: item 3.2
      li: item 3.3

我想要实现的是以“子菜单项容器”在单击时滑动到下一个子菜单的方式显示子菜单。在上面的例子中，这意味着:

• 当用户点击元素 2 时，将显示包含子元素的容器
• 当用户点击元素 3 时，容器以某种方式从元素 2 到元素 3 进行滑动/动画/过渡，更改子元素

只有在子菜单容器已经可见时才会发生此转换...如果不可见，它只会显示在单击的菜单项旁边。

我不确定如何解决这个问题，希望得到您的帮助。谢谢!

编辑:

这是启用悬停的示例，没有 JS(我知道 CSS 不支持 onclick，但我可以稍后处理): http://codepen.io/anon/pen/HDinB

这显示了底部对齐的主菜单项。每个主菜单项都可以有子项(这只是一级深菜单，不会再有子级)。子菜单将包含最多 9 个元素，这些元素将适合一个框(您看到的黑框)。我想要的是子项出现在那个框中，但是当选择带有子菜单项的新主项时，此框将滑动(如果已经可见)到新位置并且是新子项的包装器。这是一个 float 的盒子，还是真正的容器，或者第三种东西，我不知道，因为我真的不知道什么是处理这个的最佳方法。

Answer 1

我绝对不是 jQuery 专家，我认为 jQuery 适合您。

我为您创建了这个功能。当子菜单展开时，类 expand 被分配给它。

单击链接时，该函数将检查它是否具有 expand 类，如果是，它将关闭子菜单。否则，将关闭所有其他 expand 类(如果存在)并显示子菜单。

HTML:

<ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a>
        <ul>
            <li><a href="#">item 2.1</a></li>
            <li><a href="#">item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">item 3</a>
        <ul>
            <li><a href="#">item 3.1</a></li>
            <li><a href="#">item 3.2</a></li>
            <li><a href="#">item 3.3</a></li>
        </ul>
    </li>
</ul>

CSS:

li ul {
    display: none;
}

jQuery:

$(document).ready(function() {
    $("li:has(ul) a").on('click', function(e) {
        e.preventDefault();
        var ul = $(this).parent().find('ul');

        if( ul.hasClass('expand') ) {
            ul.removeClass('expand').slideToggle()
        }
        else {
            $('.expand').removeClass('expand').slideToggle();
            ul.addClass('expand').slideToggle();
        }
    });
});

jsFiddle DEMO .

希望它适合您，或者至少对您有所帮助。