我如何将带有 Javascript 的 class 添加到特定 div 中自动生成的 Joomla 菜单子项 'li'？

Question

我正在为 Joomla 4 使用 Bootstrap 4 制作模板。不同级别（父级、子级、更深层等）的主菜单结构在 mod_menu php 文件。我将相同的（主站点）菜单放在两个位置：一个用于移动设备 (#sidenav)，一个用于桌面视图 (#mainmenu)。

作为菜单中下一级 divider/header 的子级别的 li 项目（例如项目 'More information' 但不是 'Top Level item'）具有 class .dropdown-submenu 从 mod_menu/default_separator.php 文件中应用。

sidenav 显示如我所愿（见图：），但在主菜单 div（即 desktop/large 平板电脑视图）中，我想要第二个和任何后续级别下拉列表为 'dropright'。

当我使用 Firefox 检查器添加 class 时，它工作得很好，所以为了使它自动发生，我需要添加一个 class 使用 Javascript 来改变它:

    <li class="dropdown-submenu">

为此，通过添加 Bootstrap class 'dropright'，使小插入符号指向右侧而不是向下：

<li class="dropdown-submenu dropright">

正如您在上面看到的，当我使用 Firefox 检查器添加 class 时，它运行良好，所以我尝试向用户 user.js 添加一些 javascript自动工作。

我尝试添加各种代码，但 none 有任何效果：

  function dropRight() {
  var element = document.getElementById('mainmenu');
  var elements = document.getElementsByClassName('.dropdown-submenu');
  elements.classList.add("dropright");
}

和

    function dropRight() {
    var element = document.getElementById('mainmenu');
    var ul = document.getElementsByClassName("dropdown-menu");
    var li = ul[0].getElementsByClassName("dropdown-submenu"); 
    for ( var i = 0; i < li.length; i++ ){
    var class = li[i].className += " dropright";
}

下面的代码也不起作用，但即使它们起作用，它们也会将 class 添加到 sidenav，我不想发生这种情况，所以我需要到 select id 'mainmenu':

    function dropRight() {
    var elements = document.getElementsByClassName('dropdown-submenu');
    elements[0].className += " dropright";
    }

或

    function dropRight() {
    var elements = document.getElementsByClassName('.dropdown-submenu');
    elements.classList.add("dropright");
}

我昨天一整天都在网上搜索答案，并尝试了许多其他组合都无济于事。 Javascript 绝对不是我的强项，所以任何帮助都将不胜感激。

Answer 1

我找到了答案：

window.onload = function(){dropRight()};
function dropRight() {
    var x = document.getElementById("mainmenu").querySelectorAll("li.dropdown-submenu");
x[0].className += " dropright";
}

我如何将带有 Javascript 的 class 添加到特定 div 中自动生成的 Joomla 菜单子项 'li'？

How do I add a class with Javascript to a auto-generated Joomla menu child item 'li' within specific div?

javascript

joomla

menu

bootstrap-4