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

我有菜单定义与UL，李。。。最多一个子菜单：

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，但我可以稍后处理）：

---

这将显示底部对齐的主菜单项。每个主菜单项都可以有子项（这只是一级深菜单，不会有更多的子级）。子菜单将包含最多9个项目，这些项目将放入一个框中（您看到的黑框）。我想要的是，子项在该框中显示，但当选择带有子菜单项的新主项时，该框将滑动（如果已经可见）到新位置，并有可能是新子项的包装器。这是一个浮动的盒子，还是真正的容器，或者是第三种东西，我不知道，因为我不知道最好的处理方法是什么。

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

我创建了这个函数。展开子菜单时，将为其指定类

expand

单击链接时，函数将检查它是否有

扩展

类，如果有，它将关闭子菜单。如果没有，则所有其他

扩展

类将关闭（如果存在）并显示子菜单

HTML:

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();
        }
    });
});

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

<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>
















ul li{显示：内联块；位置：相对；}
ul li ul{显示：无；宽度：100%；位置：绝对；空白：nowrap；边距：0px；填充：0px；顶部：20px；}
ul li ul li{显示：块；}
$（文档）.ready（函数（）{
$（“.menu li”）。单击（函数（）{
$（“.menu li ul”）.slideUp（）；
if（$（this.find（“ul”）.css（“display”）==“block”）
{
$（this.find（“ul”）.slideUp（）；
}
其他的
{
$（this.find（“ul”）.slideDown（）；
}
});
});

你试过什么了吗？：）允许jQuery吗？最好使用JS最少的CSS（如果可能的话，不要使用jQuery）。我不知道如何开始这件事。。我最初的想法是：1。显示子菜单，2如果选择了新菜单（并且有一个子菜单），则将当前打开的子菜单转换为新子菜单3的相同坐标。淡出/进入子菜单。但这需要知道过渡何时结束，以开始淡入/淡出…或者，有某种绝对位置的“背景”，前后滑动..CSS没有“点击”触发器，因此只有JS才能触发点击。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();
        }
    });
});

<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>