我的JQuery代码有什么问题？ 手风琴不工作
[英]What's wrong with my JQuery code? The accordion is not working
问题描述
Any ideas as to why the accordion is not working? 
关于为何手风琴不起作用的任何想法？ I am a noob :( 我是菜鸟:(
I have no clue what is wrong with it. 我不知道这是怎么回事。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Accordion</title>
<script type="text/javascript"
<script> src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$( function() {
$("#accordion").accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
Stuff
</div>
<h3>Section 2</h3>
<div>
Stuff
</div>
<h3>Section 3</h3>
<div>
Stuff
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
Stuff
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
0 2018-04-09 03:15:40
<script type="text/javascript"
<script> src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Your HTML is invalid. 您的HTML无效。 Tags need to be closed, and attributes of a tag need to be immediately after the tag < , before its > . 标签需要关闭，并且标签的属性必须紧接在标签< ， >之前。
You also need to include jquery-ui . 您还需要包括jquery-ui 。 See: 看到：
$(function() { $( "#accordion" ).accordion(); });
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Accordion</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>Section 1</h3> <div> Stuff </div> <h3>Section 2</h3> <div> Stuff </div> <h3>Section 3</h3> <div> Stuff <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>Section 4</h3> <div> Stuff </div> </div> </body> </html>
解决方案2
0 2018-04-09 07:54:41
Looks like you used the .accordion() function from jQuery UI but you didn't included the file. 看起来您使用了jQuery UI中的.accordion（）函数，但未包含该文件。 Also the source of your jquery file is not correct. 另外，您的jquery文件的源不正确。 I'm pasting here the right code. 我在这里粘贴正确的代码。 I have used simple jquery toggle function to make it. 我使用了简单的jquery切换功能来实现它。 I'm also adding some CSS in header. 我还在标题中添加了一些CSS。 You can write it in your CSS file if you are using any external. 如果您使用任何外部设备，都可以将其写入CSS文件中。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Accordion</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.stuff {
display: none;
padding: 10px;
}
.stuff.active {
display: block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#accordion h3").click(function(){
var stuff = $(".stuff");
$(stuff).slideUp();
$(this).next(".stuff").slideDown();
});
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div class="stuff active"> Stuff </div>
<h3>Section 2</h3>
<div class="stuff"> Stuff </div>
<h3>Section 3</h3>
<div class="stuff"> Stuff
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div class="stuff"> Stuff </div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.