我使用的是纯CSS的手风琴，它可以按我的预期工作，并带有“悬停”功能来打开幻灯片。但是，我一直希望将其更改为切换，以便在单击时将其打开，在单击时将其关闭。我找到了解释该操作方法的线程，并提供了JS来做到这一点：
Convert hover accordion to onclick
但是，在将jQuery和脚本添加到我的html之后，它似乎不起作用：
（idk为什么手风琴上的标题没有出现在应有的位置，这只是小提琴上的问题，它可以作为网页使用。）
http://jsfiddle.net/7Q8ea/
$('h3','.accordion ul li').on('click',function() {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
我猜我从上面的线程中提取的js某种程度上是错误的，但是我不确定在哪里。我试图确保它与我正在使用的css有关，但是我不是编码器，因此我可能会遗漏一些明显的东西。
ps。上面和小提琴中的JS是从其他线程“按原样”获取的，我尝试删除了“ h3”等以确保不是引起问题的原因，但显然不是。
编辑：对不起，忘了提及，它必须与IE8兼容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS accordion</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home">
<ul class="accordion" id="vertical">
<li class="slide-01">
<div>
<h2>Title goes Here</h2>
<br /> <img src="http://i.imgur.com/ezY207l.gif" height="125" width="180" /> <taxt>Text here</taxt></div>
</li>
</ul>
<script src="jquery.js"></script>
<script $('h3','.accordion ul li').on('click',function() {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
</script>
</body>
</html>
Edit2：如果我在这里出错了，请在上面张贴我的HTML。也许。大概。
Edit3：好的，我体内有JS似乎是个问题，如果我换成头部也一样。
最佳答案
你有两个问题。您的jQuery选择器不正确，您需要更新:hover css选择器，将其更改为.hover类：
新选择器：
$('h3, ul.accordion li').on('click',function() {
//$('h3','.accordion ul li').on('click',function() {
新的CSS
/*.accordion:hover li{*/
#vertical .hover li{
width:100%;
}
/*.accordion:hover{*/
#vertical .hover{
height:200px;
width:100%;
}
jsFiddle
关于javascript - CSS Accordion->添加jquery将“hover”更改为切换，但是JS没有注册？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17676265/