下拉菜单项在容器外部打开

Question

我正在创建一个移动菜单，如下所示为下拉列表项，>>

jQuery('#menu-main-menu > .is-dropdown-submenu-parent a').click(function() {
  $(this).siblings('ul').slideToggle(500);
  jQuery(this)
    .closest(".is-dropdown-submenu-parent")
    .siblings()
    .find(".sub-menu")
    .slideUp();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu-mobile" class="menu-list navbar-collapse collapse clearfix">
  <ul id="menu-main-menu" class="navigation clearfix" style="display:flex; flex-direction: column">
    <li data-toggle="collapse" class="dropdown  is-dropdown-submenu-parent collapsed">
      <a href="#">menu 1</a>
      <ul class="sub-menu ">
        <li><a href="#">sub menu 1</a></li>
        <li><a href="#">sub menu 2</a></li>
        <li><a href="#">sub menu 3</a></li>
        <li><a href="#">sub menu 4</a></li>
      </ul>
    </li>
    <li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
      <a href="#">menu 2</a>
      <ul class="sub-menu">
        <li><a href="#">sub menu 1</a></li>
        <li><a href="#">sub menu 2</a></li>
        <li><a href="#">sub menu 3</a></li>
        <li><a href="#">sub menu 4</a></li>
      </ul>
    </li>
  </ul>
</div>

问题是，当我单击打开主菜单时，它在菜单框架的外部打开（它到达容器的外部），解释更多：当我单击menu1时，菜单项显示在menu2上方。假定向下移动menu2并列出以下菜单1的项目。

我没有弄明白错误在哪里，我已经搜索并看到了所有菜单，就像我做的一样！！

我正在创建一个移动菜单作为下拉列表项，如下所示，jQuery（'＃menu-main-menu> .is-dropdown-submenu-parent a'）。click（function（）{$（this）.siblings（ 'ul'）。slideToggle（500）; ...

Answer 1