我刚刚在我的HTML中插入了一段非常简单的javascript，虽然它根本不起作用，但我检查了几次但却找不到错误。
我插入的javascript是添加扩展/折叠功能。当我在StackOverflow的代码板中单独粘贴我的HTML，CSS和JS时，它运行良好，但当我把它们放在一起时，JS部分只是不起作用。
提前致谢！
<!DOCTYPE html>
<html>
<head>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});
</script>
</head>
<style type="text/css">
.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
</html>
答案 0 :(得分：1)
将脚本放在引用jQuery的标记下面。由于它是从上到下执行的，因此浏览器在运行脚本时没有加载jQuery，所以没有任何反应。
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});
</script>
</html>