javascript - 在 Joomla (1.7.0) 中点击显示嵌套列表

Question

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

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

Codepen

Answer 1

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

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

函数 menuMechanics 禁用链接。并添加或删除类以显示或隐藏嵌套的 ul。

代码的最终规则是在单击后将 menuMechanics 函数添加到所有“has-nested-children”类元素。

<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>