如何在特定div内向自动生成的Joomla菜单子项“ li”添加带有Javascript的类？

Question

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

子级的li项充当菜单中下一级的分隔符/标题（例如，“ More information”项，但不是“ Top top item”项）具有从mod_menu /中应用的.dropdown-submenu类default_separator.php文件。

sidenav按我的意愿显示（请参见图片：

[当我使用Firefox检查器添加类时，它可以完美地工作，因此，要自动进行此操作，我需要使用Javascript添加一个类以对此进行更改：

    <li class="dropdown-submenu">

<<

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

<li class="dropdown-submenu dropright">

正如您在上面看到的，当我使用Firefox检查器添加类时，它可以正常工作，因此我试图向用户user.js添加一些JavaScript，使其自动运行。

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

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

以下代码也不起作用，但是即使它们起作用，它们也会将类也添加到sidenav中，这是我不想发生的，因此我需要选择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绝对不是我的堡垒，因此非常感谢您的帮助。

我正在使用用于Joomla 4的Bootstrap 4的模板。在mod_menu php文件中定义了不同级别（父，子，更深等）的主菜单结构。我已经放置了相同的（...

Answer 1

我找到了答案：