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