下拉菜单项在容器外打开答案

【问题标题】：Dropdown Menu Items Open Outside the Container下拉菜单项在容器外打开
【发布时间】：2020-05-11 17:38:13
【问题描述】：

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

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向下移动并列出menu1下面的项目。

我不知道错误在哪里，我已经搜索并查看了所有菜单！

【问题讨论】：

您也可以发布您的 CSS 吗？
@Fatimah 我用你的代码做了一个 sn-p，你能告诉我们你想要什么吗？从您提供的代码中看不够清楚，还是您缺少更多代码？
我正在为 CSS 使用 bootstrap 3，因为我没有添加它。我想要：当我单击 Menu1 时，它会打开 Menu1 下的项目并将 Menu2 向下移动。如此处链接stackoverflow.com/questions/41045593/…。可能是 CSS 代码的问题

标签： html css responsive-design menu dropdown

【解决方案1】：

试试这个小改动

我在 .js 中注释了 slideUp() 行。我认为它可以按您的意愿工作。

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();   // commented this line
});

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

【讨论】：

它在 sn-p 中运行良好，但是当我评论 slideUp() 时它不起作用。我认为可能与 CSS 代码有关的问题