我正在使用 Bootstrap 4 为 Joomla 4 开发一个模板。不同级别(父级、子级、更深层次等)的主菜单结构是在 mod_menu php 文件中定义的。我已将相同的(主站点)菜单放置在两个位置:一个用于移动设备 (#sidenav),一个用于桌面 View (#mainmenu)。
子级别的 li 项目充当菜单中下一级的分隔符/标题(例如项目“更多信息”但不是“顶级项目”)具有从 mod_menu 应用的类 .dropdown-submenu/default_separator.php 文件。
侧导航按我想要的方式显示(参见图片: ),但在主菜单 div(即桌面/大型平板电脑 View )中,我希望第二个和任何后续级别的下拉菜单为“dropright”。
当我使用 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";
}
以下代码片段也不起作用,但即使它们起作用,它们也会将类添加到侧导航,这是我不希望发生的,所以我需要选择 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 绝对不是我的强项,因此非常感谢您的帮助。
最佳答案
我找到了答案:
window.onload = function(){dropRight()};
function dropRight() {
var x = document.getElementById("mainmenu").querySelectorAll("li.dropdown-submenu");
x[0].className += " dropright";
}
关于javascript - 如何将带有 Javascript 的类添加到特定 div 内自动生成的 Joomla 菜单子(monad)项 'li' 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58234299/