将悬停手风琴转换为onclick

Question

我有一个用纯css3开发的手风琴菜单。目前它是悬停在它上面时打开菜单但我希望它在点击时打开。我能做到这一点吗？

还有一个帮助。目前内容div位于标题的右侧，但我需要在左侧打开它。

内容div应根据内容自动宽度。

以下是DEMO

Answer 1

$('h3','.horizontalaccordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});​

FIDDLE

Answer 2

我认为您不仅需要点击，而且还想关闭之前打开的面板，请查看此代码：

$('h3','.horizontalaccordion ul li').click(function() {
  $('*[class*=hover]').removeClass('hover'); // close all opened tabs
  $(this).closest('li').addClass('hover'); // open the currently clicked one
});​

jsFiddle Example

我希望这适合你！