时间戳

首页 > 解决方案 > 如何将带有 Javascript 的类添加到特定 div 中自动生成的 Joomla 菜单子项“li”？

javascript - 如何将带有 Javascript 的类添加到特定 div 中自动生成的 Joomla 菜单子项“li”？

问题描述

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

子级别的 li 项目充当菜单中下一个级别的分隔符/标题（例如项目“更多信息”但不是“顶级项目”）具有从 mod_menu/default_separator 应用的类 .dropdown-submenu。 .php 文件。

sidenav 显示为我想要的（参见图片：）侧导航，但在主菜单 div（即桌面/大型平板电脑视图）中，我希望第二个和任何以下级别的下拉菜单都是“dropright”。

当我使用 Firefox 检查器添加类时，它工作得很好，所以为了自动实现这一点，我需要使用 Javascript 添加一个类来改变它：

    <li class="dropdown-submenu">

没有dropright

为此，通过添加 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 绝对不是我的强项，因此非常感谢您提供任何帮助。

标签： javascriptbootstrap-4joomlamenu

解决方案

我找到了答案：

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

推荐阅读