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

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 个可放入一个盒子（您看到的黑盒子）的项目。 What I want is that subitems apear "in" that box, but when new main item with submenu items is selected this box will slide (if already visible) to the new position and kind of be wrapper for new subitems.这是一个浮动的盒子，还是真正的容器，还是第三种，我不知道，因为我真的不知道处理这个问题的最佳方法是什么。

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.

希望它适合你，或者至少可以帮助你。

Answer 2

<ul class="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a>
        <ul class="sub-menu">
            <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 class="sub-menu">
            <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>

<style type="text/css">
ul li{display:inline-block; position:relative;}
ul li ul{display:none;width:100%; position:absolute; white-space: nowrap;margin:0px;padding:0px;top:20px;}
ul li ul li{ display:block;}
</style>

<script type="text/javascript">

$(document).ready(function(){
    $(".menu li").click(function(){
        $(".menu li ul").slideUp();

        if($(this).find("ul").css("display")=='block')
        {
        $(this).find("ul").slideUp();
        }
        else
        {
        $(this).find("ul").slideDown();
        }
    });
});

</script>