问题
I had created accordion layout using html and CSS. I will create many parent row in an loop using JavaScript, so i don't know the exact parent count to apply CSS. To went for range specification like [class*="tabb"] and [id*="tabb"], MY try has been commented in the below code. As of now it not working as accordion way, its simply opens all parent row and I'm unable to collapse it again.
Guys please help me out from this.
My Try code:
<!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>
Note: My try has been commented as below
/*[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;
}*/
How can i specify the range to achieve my accordion functionality ?
回答1:
Here I have tried to solve your issue
Code
$(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)}
})
Here is updated fiddle
Fiddle http://jsfiddle.net/krunalp1993/9Tpzp/2/
Hope it helps you . :)
回答2:
<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>
来源：https://stackoverflow.com/questions/21448581/apply-range-for-class-and-id-in-css