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

【问题标题】：Clickable show/hide accordion menu using CSS使用 CSS 的可点击显示/隐藏手风琴菜单
【发布时间】：2012-11-15 19:08:32
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

【讨论】：

【解决方案2】：

你可以使用你的 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');
});

你就完成了。完整代码

【讨论】：