Question

我有两个不同megamenu设置的链接：

toggle使用click效果以及3 column width下拉列表（column-width-3，mode-click）。
Products链接使用hover效果以及full width column（column-justify，mode-hover）。

源代码：

＆＃13;

if ($("uk-navbar-container").has(".mega-menu-active")) {

  var get_id = $(".uk-navbar-dropdown-grid").prop('id');
  // console.log( get_id );


  if ($('#' + get_id).hasClass("column-justify")) {
    if ($('#' + get_id).hasClass("mode-click")) {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="mode:click;"></div>');
    } else {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="..."></div>');
    }
  } else {

    if ($('#' + get_id).hasClass("mode-click")) {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="mode:click;"></div>');
    } else {
      $('.uk-navbar-dropdown-grid').wrap('<div class="uk-navbar-dropdown" uk-drop="..."></div>');
    }

  }

}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uk-navbar-left">
  <ul class="uk-navbar-nav">

    <a href="#" class="uk-navbar-toggle mega-menu-active"><span class="toggle-icon"></span></a>

    <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3" uk-drop="...">
      <div id="megamenu-954" class="uk-navbar-dropdown-grid uk-grid column-width-3 mode-click megamenu-954">
        <div class="uk-width-1-3">
          <ul class="uk-navbar-dropdown-nav">
            <li>...</li>
            <li>...</li>
          </ul>
        </div>

      </div>
    </div>


    <li id="menu-item-950" class="mega-menu-active">
      <a href="#">Products</a>

      <div class="uk-navbar-dropdown" uk-drop="...">
        <div id="megamenu-946" class="uk-navbar-dropdown-grid column-justify mode-hover megamenu-946">

          <div class="uk-width-1-3">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li>...</li>
              <li>...</li>
            </ul>
          </div>

        </div>
      </div>

    </li>


  </ul>
</div>

＆＃13;

我使用wrap()函数添加一些额外的代码，以使click/hover和column width成为可能。

我遇到的问题是，虽然Products链接包含column-justify和mode-hover类，但宽度为column-width-3（与toggle相同）

两者兼而有之，悬停效果用于两个链接（仅toggle应该在click mode上，hover mode用于Products链接。

wrap（）函数依赖于父ID

0 个答案: