Question

我有一个问题，Joomla显示位于网站左侧的导航菜单。我想点击他们的父母时打开一些子菜单。我想要的效果显示在提供的Codepen中。但我想点击而不是将鼠标悬停在该项目上。

与Joomla的关系是，我必须链接＆＃34;父项目＆＃34;一篇文章。即使我用javascript删除href，如果我点击＆＃34; li＆＃34; -item，joomla将重新加载页面。这将撤消所需的效果（我尝试使用javascript设置特定类来设置＆＃34;显示：无＆＃34;显示：块＆＃34;点击后在嵌套列表上显示。）

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

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

1 个答案: