joomla中的可点击下拉菜单

Question

我有CSS（HTML）水平菜单，并且一切正常，但是当我用鼠标触摸时，出现菜单“ 列表”之一，但我想使其可单击。 / p>

我几乎尝试了这一行中的所有内容：

.main-nav-ul li:hover ul {
    display: block;
}

但是没有成功... 我正在使用Joomla和自定义HTML CSS Javascript模块。
我使用以下代码：

https://github.com/shahbokhari/webdev/blob/master/Vertical-Drop-Down-Navigation-2015%202/vertical-drop-down-navigation-using-html-css-2015.html

我希望当我单击ЧАСТИЗАLEDТАБЕЛИ时能够看到此类别中的子菜单。

Answer 1

使用CSS，您只能处理悬停（鼠标进入和鼠标移出）。处理点击，您应该使用javascript：

$('.main-nav-ul li').click((e)=>{
  $(e.target).closest('li').toggleClass('toggled');
});

点击后，它将切换（添加/删除）li元素的toggled类。

然后您应该在CSS中将li:hover替换为li.toggled，以便在li切换类时应用切换样式。

您可以在codepen

中看到它