我创建了accordion layout using html and CSS。我将创建many parent row in an loop using JavaScript，因此我不知道应用CSS的确切父计数。要使用[class*="tabb"] and [id*="tabb"]之类的范围指定，MY try已在下面的代码中注释。截至目前它不像手风琴一样工作，它只是打开所有父行，我无法再次崩溃。
伙计们，请帮助我解决这个问题。
我的试用代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
*{
margin:0;
padding:0;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
height: 600px;
overflow: hidden;
position: relative;
width: 100%;
}
.content {
margin:0 auto;
width:900px;
}
.accordion {
color: #000000;
margin: 50px auto;
position: relative;
width: 590px;
}
.accordion span {
display: none
}
.tabs {
background-color: #FFFFFF;
overflow: hidden;
}
.tabs dl dd a {
background-color: #C8CEFF;
border: 1px solid;
border-color:#ccc;border-bottom-color:#aaa;
display: block;
font-size: 18px;
line-height: 32px;
padding: 5px 20px;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tabs dl dd div {
background-color: #FFF;
height: 0;
overflow: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tabs dl dd div p {
color: #444444;
font-size: 13px;
padding: 15px;
text-align: justify;
}
.tabs dl dd a:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tabb1:target ~ .tabs .tabb1 dd div {
height: 100px;
}
#tabb2:target ~ .tabs .tabb2 dd div {
height: 345px;
}
#tabb1:target ~ .tabs .tabb1 dd a,
#tabb2:target ~ .tabs .tabb2 dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
/*[id*="tabb"]:target ~ .tabs [class*="tabb"] dd div {
height: 100px;
}
[id*="tabb"]:target ~ .tabs [class*="tabb"] dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}*/
</style>
</head>
<body>
<div class="container">
<div class="accordion">
<span id="tabb1"></span>
<span id="tabb2"></span>
<div class="tabs">
<dl class="tabb1">
<dd>
<a href="#tabb1">Tab #1</a>
<div><p>Tab1</p></div>
</dd>
</dl>
<dl class="tabb2">
<dd>
<a href="#tabb2">Tab #2</a>
<div>
<p>
Tab2
</p>
</div>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
注意：我的尝试已被评论如下
/*[id*="tabb"]:target ~ .tabs [class*="tabb"] dd div {
height: 100px;
}
[id*="tabb"]:target ~ .tabs [class*="tabb"] dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}*/
如何指定实现手风琴功能的范围？
答案 0 :(得分：1)
我试图解决您的问题
<强>代码
$(document).on('click','a[href^="#tabb"]',function(){
if($(this).siblings('div').height() == 0){
$(this).siblings('div').css('height',100) }
else{$(this).siblings('div').css('height',0)}
})
这是更新的小提琴
小提琴 http://jsfiddle.net/krunalp1993/9Tpzp/2/
希望它对你有所帮助。 ：）
答案 1 :(得分：0)
<style>
.tabview{display:none;}
</style>
<span id="tab0" onclick="showtab(0);">Tab 1</span>
<span id="tab1" onclick="showtab(1);">Tab 2</span>
<span id="tab2" onclick="showtab(2);">Tab 3</span>
<div id="tabview0" class="tabview">View 1</div>
<div id="tabview1" class="tabview">View 2</div>
<div id="tabview2" class="tabview">View 3</div>
<script>
function showtab(){
//i'm hardcoding 3 here;
//but you should know the number of tabs as you're generating them
var len=3;
for (var i=0;i<len;i++){
document.getElementById('tab'+i).style.fontWeight='normal';
document.getElementById('tabview'+i).style.display='none';
}
document.getElementById('tab'+i).style.fontWeight='bold';
document.getElementById('tabview'+i).style.display='block';
}
showtab(0); //open the first tab by default
</script>