在 Joomla (1.7.0） 中单击时显示嵌套列表

Show nested list on click in Joomla (1.7.0)

本文关键字：单击 显示 嵌套 列表 Joomla      更新时间：2023-09-26

我对Joomla显示位于网站左侧的导航菜单有问题。我希望一些子菜单在单击其父级时打开。我想要的效果显示在提供的代码笔中。但是我想单击而不是将鼠标悬停在该项目上。

Joomla的事情是我必须将"父li-item"链接到一篇文章。即使我用javascript删除了href，如果我点击"li"项，joomla也会重新加载页面。这将撤消所需的效果（我尝试使用 javascript 应用特定类，单击后在嵌套列表中将"display：none"设置为"display：block"）。

使用css，html，javascript或joomla覆盖的解决方案将具有我的偏好。

PS：我知道我使用的是旧版本的Joomla。我也许可以在不久的将来升级它（当我被授予访问网站控制面板的权限时）。

PS2：我知道有一个付费插件可以做到这一点，但我正在一个慈善网站上工作，我想将插件保持在最低限度。我也想知道如何在代码中做到这一点！

HTML
<ul>
<li>
<a href="something">Click me and don t load this link with Joomla</a>
<ul>
<li>Show me on click (not hover)</li>
</ul>
</li>
</ul>

.

CSS
ul>li>ul{
  display: none;
}
ul>li:hover>ul{
  display: block;
}

代码笔

我设法用这段代码做到了：

函数hasClass检查元素是否具有特定的类。

功能菜单机制禁用链接。并添加或删除类以显示或隐藏嵌套的 ul。

代码的最终规则在单击菜单力学函数后将它添加到所有"具有嵌套子项"类项中。 

<script type="text/javascript">
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
function menuMechanics(event){
    event.preventDefault();
    if(hasClass(this.parentElement, "active") === true){
        this.parentElement.className = this.parentElement.className.replace("active", "");
    }
    else{
        this.parentElement.className += " active";
    }
}
hasNestedChildren = document.getElementsByClassName('has-nested-children');
    for(i=0; i<hasNestedChildren.length; i++){
        hasNestedChildren[i].addEventListener("click", menuMechanics);
    }
</script>
相关文章：