javascript - 如何防止 Javascript 中带有子菜单的响应式下拉子菜单中的默认行为

Question

我有一个 Joomla 3 网站，其中的桌面菜单可以完美运行，而响应式菜单则不能。所有菜单项都是由 PHP mod_menu 覆盖动态生成的，因此我无法手动将代码添加到各个菜单项(我也不希望这样做)。

菜单中有三个级别:顶层有一些直接转到 URL 的项目，还有一些是分隔符。在这些分隔符下是第二(子)级别，其中一些还具有带有子级别项目的分隔符(我将称它们为“孙子”)。

在响应式菜单中，点击或单击顶层的下拉项目将打开下拉菜单。这可以。单击子级分隔符时会出现问题。它应该打开下一个级别以显示包含孙项目的下拉菜单。相反，点击/单击只是将其关闭。

桌面版看起来像这样: Desktop non-responsive menu

点击顶级(“按”)项目后，在响应式版本中就像这样: Responsive menu first level open

当我点击“存档”时，它应该如下所示: Responsive menu fully open但事实并非如此。它只是关闭回到“新闻”级别。

这是菜单的基本版本:

<div id="mySidenav">
  <ul class="navbar-nav">
    <li class="nav-item item-101">/* item numbers generated dynamically */ Home</li>
    <li class="nav-item item-102">Another page</li>
    <li class="nav-item item-103 divider deeper parent dropdown show">[separator]
      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="true">Press + caret</a>
      <ul class="nav-child unstyled dropdown-menu show">
        <li class="nav-item item-104">Article page</li>
        <li class="dropdown-submenu dropright">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">Archive + caret</a> /* this closes back up to 'Press' when tapped */
            <ul class="nav-child unstyled dropdown-menu show">
              <li class="nav-item item-111">
              <a class="dropdown-item href="/press/archive/2018-19">Reviews 2018-19</a>
             </li>
           </ul>
         </li>
      </ul>
    </li>
  </ul>
</div>

我已经在这里浏览了几十篇文章，但大多数似乎都处理更高级别的下拉菜单，这对我来说效果很好，但不是下一个级别。我已经尝试过 JS/jQuery 的这些(和变体)。我真的需要用普通的 Javascript 来解决这个问题，因为 Joomla 正在放弃 J4x 中的 jQuery 支持，而且我也不准备使用最新的 JS e6。

我已经尝试过这个，它适用于我的 J4 开发站点，但不适用于 J3:

$(function() {
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).siblings().toggleClass("show");
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });
  });
});

还有这个(来自 [30245141] 的 JS Fiddle)4

$(document).ready(function() {
    // Hide the sub-items
    $('#mySidenav > ul > li > ul > li > ul').hide();
    
    $('#mySidenav ul > li > ul > li.dropdown-submenu.dropright').on('click', function(event) {
        if ($(this).children('ul:not(:visible)').length > 0) {
            event.preventDefault();
            $(this).children('#mySidenav ul > li > ul > li > ul').addClass('show');
        } else {
            // Normal behaviour
        }
    });
});

这基于 37817449#37817449

$('li.dropdown-submenu.dropright a').on('click', function (event) {
    $(this).parent().toggleClass('show');
});
$('body').on('click', function (e) {
    if (!$('li.dropdown-submenu.dropright').is(e.target) 
        && $('li.dropdown-submenu.dropright').has(e.target).length === 0 
        && $('.show').has(e.target).length === 0
    ) {
        $('li.dropdown-submenu.dropright').removeClass('show');
    }
});

但是什么都不起作用。救命!

编辑:

我尝试了一些纯 JS，只是尝试向下拉菜单添加背景颜色，如下所示:

window.onload=function(){mOrange()};
function mOrange(){
  var m, i;
  m = document.getElementById("mySidenav").querySelectorAll("ul.nav-child.dropdown-menu.show li.dropdown-submenu.dropright.show ul.nav-child.dropdown-menu.show");
  for (i = 0; i < m.length; i++) {
    m[0].classList.add("bgorange");
  }
}

也可以使用这种添加类的方法:

    m[0].className += " bgorange";

但它们也不起作用。它一定与菜单的加载/事件的计时有关。

请问有什么帮助吗？

Answer 1

经过很长时间的努力，我最终成功地使用 this video 制作了一个完全无 JS 和 jQuery 的响应式菜单。作为基础，与 Joomla mod_menu 覆盖相结合，为每个项目生成具有唯一 ID 的标签。该视频显示了带有标签输入 ID 的硬编码菜单；动态生成它们是另一个挑战，但通过覆盖和一些巧妙的 css 来实现，以仅显示下拉项的标签(不指向任何链接)，而不显示链接到 URL 的实际 a 标签。