我在教程和一些演示文件的帮助下创建了一个手风琴,即使演示文件有效,当我将其转移到我的HTML文件时,它也不会在点击时展开。奇怪的是,当我将它粘贴到jsfiddle时,它可以工作。我不确定我在这里做错了什么。
继承我的HTML,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>What is Diabetes?</title>
<script type="text/javascript" src="js/accordion.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous">
</script>
<link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400|Roboto:100,200,300,400,800,900|Source+Sans+Pro:300,400|Raleway:100,200,300,400,500,800,900" rel="stylesheet">
<link href="css/accordion.css" rel="stylesheet" type="text/css">
<!--Fonts-->
</head>
<body>
<div id="container"> <!-- Container for Everything -->
<div class="divider1"></div>
<div class="sectionbanner">
<h2>WHAT IS DIABETES?</h2>
</div>
<div class="divider1"></div>
<div id="whatisdiabetes">
<p>Diabetes or diabetes mellitus is a chronic disease where the body does not make or does not use insulin properly, resulting in having too much sugar (glucose) in the blood. Sugar comes from the food we eat. The body needs sugar to make energy. The amount of sugar in the blood of a normal person is closely controlled by a substance called insulin. Insulin is made by the pancreas, a gland found below the stomach. People with diabetes either do not produce enough insulin or the insulin produced does not work well. As a result, sugar builds up in the blood.<br><br>
Over time, high sugar levels can give rise to problems like infections, blindness, kidney disorders, stroke, heart disease, and foot and leg disorders.</p>
</div>
<div id="faq">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->
</div>
</div>
</body>
</html>
至于我的JS和CSS,这正是我把它放在jsfiddle中的方式。老实说,我为什么它在jsfiddle工作时感到困惑和困惑,但是当我使用Dreamweaver将它放在我的HTML中时却没有。