0

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

  • 使用效果和toggle下拉菜单 ( , )。click3 column widthcolumn-width-3mode-click

  • 该Products链接使用hover带有full width column( column-justify, mode-hover) 的效果。

源代码：

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>');
    }

  }

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

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

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

另外，对于这两个链接，悬停效果都用于两个链接（而toggle单独应该打开click mode并且hover mode用于Products链接）。

4

0 回答 0