如何在一个DIV打开时让文本停止移动？

Question

这里就是我说的：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 
}); 

我的问题是，每当我打开第一个标签时，第二个标签上的+符号向下移动，我希望它保持不动。我已经使用上.ta351inline-block尝试，但这样做使得第二个标签的盒子有一个奇怪的跳跃效应或东西：https://jsfiddle.net/5evusmgc/

那么，怎样才能让我的+符号留在地方，避免跳动的效果呢？非常感谢你的帮助。

Answer 1

另一种选择：

清除浮动现在UI正常工作我想（均为+和background一起移动）

$(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 
 
});

#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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ta35"> 
 

 
    <!-- tab --> 
 
    <div> 
 
    <div class="ta351">+</div> 
 
    <div class="ta352"> 
 
     <div class="ta354">title</div> 
 
     <div class="ta353"> 
 
     content 
 
     </div> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
    </div> 
 
    <!-- end --> 
 

 
    <!-- tab --> 
 
    <div> 
 
    <div class="ta351">+</div> 
 
    <div class="ta352"> 
 
     <div class="ta354">title</div> 
 
     <div class="ta353"> 
 
     content 
 
     </div> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
    </div> 
 
    <!-- end --> 
 

 
</div>

Answer 2

您正在使用效果基本show效果，并应用时间，因此，它表明像跳动的效果，

请更换持续时间0和尝试。

你可以看到Jsfiddle demo here。

EDITED

请尝试以下一个

Demo