css - 使用 CSS 的可点击显示/隐藏手风琴菜单

Question

我需要一些帮助来调整这个小手风琴菜单并用点击效果替换悬停效果，这意味着每当我点击它时显示/隐藏，而不是仅仅悬停在它上面。

我对 CSS 了解不多，我学到的一切都是即时的，但这对我来说太难了。我研究了其他选项，例如 :target 但我认为您不能同时使用它来显示和隐藏。

score 0 · Accepted Answer

score 0 · Accepted Answer

你可以使用你的 CSS 选择器

#accordion div:hover {...} and #accordion div:hover a {...}

并将它们替换为

#accordion .item.active {...} and #accordion .item.active a {...}

然后用 jQuery 添加点击功能

$('#accordion').on('click', '.item', function(){
   $('.item').not(this).removeClass('active');
   $(this).toggleClass('active');
});

你就完成了。对于完整的代码

2 回答 2