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

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

当用户点击第2项时，带有子项目的容器将显示
当用户点击项目3时，容器以某种方式滑动/动画/从项目2转换到项目3，更改子项目

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

我不知道如何解决这个问题，并希望得到您的帮助。谢谢！

修改

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

这显示了一个底部对齐的主菜单项。每个主菜单项都可以有子项（这只是一个级别的深层菜单，不会有更多的子级别）。子菜单将包含不超过最多9个项目，这些项目将适合一个盒子（你看到的黑盒子）。我想要的是apear＆＃34; in＆＃34;那个框，但是当选择带有子菜单项的新主项时，此框将滑动（如果已经可见）到新位置，并且是新子项的包装。这将是一个浮动的盒子，或真正的容器，或第三，我不知道，因为我不知道什么是最好的方法来处理这个。

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>

菜单包含可滑动的子菜单容器

2 个答案: