ここでは、私が話しているもの:https://jsfiddle.net/npbfop3w/1つのDIVが開いたときにテキストの移動を停止するにはどうすればよいですか?
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
});
私の問題は、最初のタブを開くたびに、2番目のタブの+
シンボルが下に移動し、それがまだ残ってほしいということです。私は.ta351
にinline-block
を使用してみましたが、そうすることは2つ目のタブのボックスには、奇妙なジャンプ効果か何かを持っていますしました:https://jsfiddle.net/5evusmgc/
は、どのように私が代わりに+
シンボル滞在を作り、そのびくびく影響を避けることができますか?すべての助けをありがとうございました。
私は+と背景が一緒に動くことを望んでいませんでしたが、これは残りの部分よりも良くフィットしますので、ありがとう! – Sol