0
我刚在网上找到这个脚本。但是当我将它插入我的代码中时，它不起作用。当我点击协议标题时，协议内容应该“滑出”或者仅仅从可见变为不可见。我是否使用错误语法或问题在哪里？如果有人能帮助我，那将是非常棒的。我准备了一个codenippet。为什么这个手风琴切换不起作用？
<div id="accordion">
<div class="accord-header">
<a id="h31">
<span id="textspan1">1.Text<br /></span><br />
</a>
</div>
<div class="accord-content">
<p id="p1">
<span id="Span">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span><br />
</p>
</div>
</div>
$(document).ready(function($) {
$('#accordion').find('.accord-header').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accord-content").not($(this).next()).slideUp('fast');
});
});#accordion {
float: left;
height: auto;
margin: 70px 0px 0px;
clear: left;
width: 100%;
display: block;
}
#h31:hover {
color: rgb(0, 235, 199);
line-height: 1.5em;
font-weight: 400;
}
#p1 {
float: none;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin: 0px 0px 0px 0%;
clear: left;
min-height: 149px;
display: block;
padding: 1.4% 1.4% 11px;
}
#Span {
font-size: 1.3em;
color: black;
font-family: source-sans-pro;
line-height: 1.3em;
font-weight: 200;
}
#h31 {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: center;
font-weight: 400;
line-height: 1.5em;
margin: 0px;
clear: none;
min-height: 0px;
font-family: source-sans-pro;
color: black;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 20px 0px 0px;
display: block;
}
#textspan1 {
font-weight: 300;
}
.accord-header {
float: left;
height: auto;
margin-left: 0%;
margin-top: 0px;
clear: none;
width: 100%;
border-bottom-color: rgb(0, 235, 199);
border-bottom-width: 6px;
border-bottom-style: solid;
cursor: pointer;
}
.accord-content {
float: left;
height: auto;
margin-left: 0%;
margin-top: 0%;
clear: both;
width: 100%;
}
.accord-content.default {display: block;}
@media only screen and (max-width: 1024px) {
#accordion {
float: left;
height: auto;
margin: 70px 0px 0px 1px;
width: 100%;
display: block;
clear: both;
}
#p1 {
display: block;
font-size: 0.9em;
font-family: source-sans-pro;
clear: none;
width: 100%;
}
#Span {
float: none;
}
#h31 {
float: left;
font-size: 1em;
height: auto;
text-align: center;
margin: 0px;
clear: none;
min-height: 0px;
font-family: source-sans-pro;
color: #000;
text-transform: uppercase;
letter-spacing: 0.2em;
width: 100%;
}
.accord-header {
float: left;
height: auto;
margin-left: 0%;
margin-top: 0px;
clear: none;
width: 100%;
}
.accord-content {
float: left;
height: auto;
margin-left: 0%;
margin-top: 0px;
clear: both;
width: 100%;
}
}
@media only screen and (max-width: 768px) {
#p1 {
font-size: 0.8em;
line-height: 1.9em;
font-weight: 300;
}
#h31 {
margin-top: 0px;
margin-left: 0px;
clear: none;
}
#textspan1 {
float: none;
font-size: 1em;
line-height: 1em;
}
#textspan2 {
float: none;
font-size: 1em;
line-height: 1em;
font-weight: 300;
}
}
<div id="accordion">
<div class="accord-header">
<a id="h31">
<span id="textspan1">1.Text<br /></span><br />
</a>
</div>
<div class="accord-content">
<p id="p1">
<span id="Span">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span><br />
</p>
</div>
</div>
不清楚你问什么！投票结束 – chouaib 2015-03-03 02:03:43
当我点击协议标题协议内容应该“滑出”或只是为了从可见变为不可见。 – 2015-03-03 02:06:18
这里工作得很好http://jsfiddle.net/onx6epgL/建议将ID改为风格类。 ID不能重复使用，并且使用类更具可扩展性 – charlietfl 2015-03-03 02:10:06