Javascript Megamenu上的中心下拉菜单

我手上有个小问题，我有一个大菜单，可以在手机和桌面上使用，我想让菜单中心的内容对齐，但我只能向左或向右对齐。 我可以将中心对齐

> ul {
display: flex;  //it was none
justify-content: center;
align-self: center;
...
}

但是，悬停始终处于启用状态，并且移动版本已打开所有菜单。。如果我关闭每一个菜单，菜单就会按预期工作。。 我开始的菜单是一把小提琴：

对实际代码的篡改

display: flex;
justify-content: space-between;

按预期工作，但菜单已全部打开

小提琴：

我的代码：

<div class="menu-container">
    <div class="menu">
        <nav  class="navbar-toggleable-md">
            <div id="toggle" class="navbar-toggler"><a></a>
            </div>
        </nav>

        <ul id="my_styles" class="rowcenter" >
            <li>
                <ul>
                    <li>
                        <a href="#">menu</a>
                        <ul>
                            <li><a href=...</a>x</li>
                            <li><a href=..</a>z</li>
                        </ul>
                    </li>
                </ul>
            </li>

JS：

/* global $ - Mega menu ***********/
      $(document).ready(function() {

          "use strict";

          $('.menu > ul > li:has(ul)').addClass('menu-dropdown-icon');
          //Checks if li has sub (ul) and adds class for toggle icon - just an UI

          $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
          //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

          $(".menu > nav > div > a").before("<a href=\"#\" class=\"menu-mobile\"><img width='34px' height='34px' src=\"/assets/images/Menu_icons/hmb.png\"></a>");

          //Adds menu-mobile class (for mobile toggle menu) before the normal menu
          //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
          //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
          //Done this way so it can be used with wordpress without any trouble

          $(".menu > ul > li").hover(function(e) {
              if ($(window).width() > 943) {
                  $(this).children("ul").stop(true, false).fadeToggle(150);
                  e.preventDefault();
              }
          });
          //If width is more than 943px dropdowns are displayed on hover

          $(".menu > ul > li").click(function() {
              if ($(window).width() <= 943) {
                  $(this).children("ul").fadeToggle(150);
              }
          });
          //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)

          $(".menu-mobile").click(function(e) {
              $(".menu > ul").toggleClass('show-on-mobile');
              e.preventDefault();
          });
          //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)

      });

---

尝试显示主ul的flex和justify：

显示器：flex； 证明内容：之间的空间；

---

将实际代码与：

display: flex;
justify-content: space-between;

按预期工作，但菜单已全部打开

---

小提琴手：

我得到了答案，我认为那不是正确的答案，但它是有效的

在.css上，我创建了一个名为center的类：

.center{
    display: flex !important;
}

然后在.JS上，我创建了一个函数，打开子菜单“ul”和toogleclass，以使用class center进行覆盖：

$(".menu > ul > li").click(function(e) {
              if ($(window).width() > 943) {
                  $(this).children('ul').fadeToggle(15);
                  $(this).children('ul').toggleClass('center');
                  e.preventDefault();
              }
          });

但是我有一个小问题：当打开一个子菜单时，单击主菜单的一个项目，我希望该子菜单在我单击文档正文的任何位置时消失，如果我单击该子菜单“ul”，或子菜单上的一个特定项目，它会像我希望的那样工作，但如果我单击其他菜单项目，则上一个子菜单保持打开状态，创建子菜单的层，我必须单击以使其消失，或者单击使其出现的主菜单项我不确定我是否清楚

---

这里有一个小问题

你能提供一个你的代码不工作的完整例子吗？html丢失了，如果我把你的东西放在一起，我会得到这样的结果：这里有一堆实际的代码，带有：display:flex；证明内容：之间的空间；小提琴手：JoséQuinto Zamora，不错，但是菜单都打开了。。。下面是一些实际代码：

$(".menu > ul > li").click(function(e) {
              if ($(window).width() > 943) {
                  $(this).children('ul').fadeToggle(15);
                  $(this).children('ul').toggleClass('center');
                  e.preventDefault();
              }
          });