以下是我所说的:https://jsfiddle.net/npbfop3w/
HTML
<div id="ta35">
<!-- tab -->
<div>
<div class="ta351">+</div>
<div class="ta352">
<div class="ta354">title</div>
<div class="ta353">
content
</div>
</div>
</div>
<!-- end -->
<!-- tab -->
<div>
<div class="ta351">+</div>
<div class="ta352">
<div class="ta354">title</div>
<div class="ta353">
content
</div>
</div>
</div>
<!-- end -->
</div>
CSS
#ta35{
position:fixed;
top:20px;
left:20px
}
.ta351{
text-align:center;
line-height:20px;
display:block;
margin-top:10px;
height:20px;
width:20px;
background: white;
border:1px solid #eee;
transition: ease 0.5s all;
-o-transition: ease 0.5s all;
-moz-transition: ease 0.5s all;
-webkit-transition: ease 0.5s all
}
.ta351:hover{
background:#ffb8cc
}
.ta351.active{
background:#ffb8cc;
}
.ta352:not(.active){
display:none
}
.ta352{
position: relative;
float: right;
margin-left:30px;
top: -22px;
background: white;
border: 1px solid #eee;
width:150px;
text-align: justify;
font-family: karla;
font-size: 10px;
letter-spacing: 0px;
color: #444
}
.ta353{
padding:7px
}
.ta354{
border-bottom: 1px solid #eee;
padding: 5px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold
}
#ta35 .cr00{
text-align: right;
padding: 0 7px 5px 0
}
SCRIPT
$(document).ready(function(){
$(".ta351").click(function(){
if($(this).hasClass('active')){ $(this).removeClass('active');
$(this).siblings('.ta352').slideUp(450);
}else{
$(this).addClass('active');
$(this).siblings('.ta352').slideDown(500);
$(this).parents().siblings().children('.ta352').slideUp(450);
$(this).parents().siblings().children('.ta351').removeClass('active');
}
});// thank you to scimonster @ stackoverflow for the help
});
我的问题是每当我打开第一个标签时,第二个标签上的+
符号就会向下移动,我希望它保持不变。我已尝试在inline-block
上使用.ta351
,但这样做会使第二个标签框出现奇怪的跳转效果:https://jsfiddle.net/5evusmgc/
那么我怎样才能使+
符号保持原位并避免这种跳跃效应呢?非常感谢你的帮助。