joomla中的可點擊下拉菜單

Question

我有CSS（HTML）水平菜單，一切正常，但當我用鼠標觸摸其中一個菜單“ 列表 ”出現，但我想讓它可點擊。

我幾乎嘗試了這一行中的所有內容：

.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');
});

當它被點擊時，它將切換（添加/刪除） toggled的li元素類。

然后你應該替換li:hover到css中的li.toggled ，以便在li切換類時應用切換樣式。

你可以在codepen中看到這個