Javascript 像uber这样的滑动子菜单

我正在创建一个类似于uber帮助页面的菜单。如何实现与单击菜单项相同的菜单类型子菜单显示为滑动，其他菜单项分散。我怎样才能做到这一点

<div class="side-memu">
  <div class="wrap">
   <ul>
      <li>Lorem
      <ul>
      <li><p>dddd</p></li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      </ul>
      </li>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Lorem</li>
   </ul>
  </div>
</div>


.side-memu { width:300px; background:#dfdfdf; height:200px;}

洛勒姆

dddd

111
111
111


洛勒姆
洛勒姆
洛勒姆

.side memu{宽度：300px；背景：#dfdfdf；高度：200px；}

试试这个：

.side-memu { width:300px; background:#dfdfdf; height:200px;}
.side-memu ul ul{display:none}

HTML:

下面是一个工作示例：

试试这个：

.side-memu { width:300px; background:#dfdfdf; height:200px;}
.side-memu ul ul{display:none}

HTML:

---

下面是一个工作示例：

为什么不尝试一些响应性导航插件

很少有导航菜单插件可以满足您的需求

---

为什么不尝试一些响应灵敏的导航插件呢

很少有导航菜单插件可以满足您的需求

---

谢谢您的回复。但我正在寻找一个像优步菜单在这里感谢你的答复。但我在这里寻找uber菜单中的一个类似于slinky导航菜单的菜单-这太棒了。非常感谢。@Shl很高兴它能为您工作：-）。如果你想，你可以接受我的答案（如果你想：-）轻巧的导航菜单-这太棒了。非常感谢。@Shl很高兴它能为您工作：-）。如果你愿意，你可以接受我的回答（如果你愿意：-）

$('.side-memu .wrap > ul > li ').click(function(){       
        $(this).children('ul').slideToggle();
    });

    $(document).mouseup(function (e)
    {
        var menu = $(".wrap > ul > li > ul");

        if (!menu.is(e.target) // if the target of the click isn't the container...
            && menu.has(e.target).length === 0) // ... nor a descendant of the container
        {
            menu.slideUp();
        }
    });