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

Question

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

http://www.deluxeblogtips.com/2010/04/accordion-menu-css3-transition.html

我对CSS并不是很了解，我所学到的一切都是在飞行中，但这对我来说太难了。我已经研究过其他选项，例如：target但我不认为你可以同时使用它来显示和隐藏。

Answer 1

尝试使用jquery .slideDown（）http://api.jquery.com/slideDown/ ,. slideUp（）http://api.jquery.com/slideUp/和.slideToggle（）http://api.jquery.com/slideToggle/。

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

你完成了。完整代码

https://jsfiddle.net/logiccanvas/ntgcj0mf/