这以前是一个纯CSS手风琴，但我决定在幻灯片中添加切换功能，让用户更容易操作，而不是让用户在鼠标离开区域时关闭它们。感谢我在上一篇文章中的帮助：
CSS Accordion->添加jquery以更改"；悬停"；切换，但JS没有；t注册
我有一个工作的"悬停切换"，它在JSFiddle:中正确工作
http://jsfiddle.net/7Q8ea/5/
我现在遇到的问题是，当我把代码从JSfiddle中取出并放到HTML中时，它根本不起作用。我检查了小提琴，把它从"Onload"改为"No wrap-In body>"，它重现了我的问题。
我去寻找一个解决方案，发现有人提到使用这段代码，将JS封装在头部。然而，要么我的语法不正确，要么就是不起作用：
$(document).ready(function() {//put your script here...});
我当前的HTML:
<!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, ul.accordion li').on('click',function() {
console.log('hi');
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
</script>
</body>
</html>
如果我把这个放在头上：
<script src="jquery.js"></script>
<script $(document).ready(function() {$('h3, ul.accordion li').on('click',function() $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
</script>
那么CSS就根本不加载了。不过，我的语法可能很混乱/错误。任何帮助都会让它发挥作用。（必须像往常一样兼容IE8：（）
您忘记关闭第二个打开的script标签：
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('h3, ul.accordion li').on('click',function() {
console.log('hi'); $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
});
</script>
第二个脚本标记中缺少'>'。
应为：
<script>
$(document).ready(function()
{$('h3, ul.accordion li').on('click',function(){
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
}
});
</script>