jquery - 当一个 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
}  

脚本

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

我的问题是，每当我打开第一个选项卡时，第二个选项卡上的 + 符号会向下移动，我希望它保持不动。我试过在 .ta351 上使用 inline-block 但这样做会使第二个选项卡的框具有奇怪的跳跃效果或其他东西:https://jsfiddle.net/5evusmgc/

那么我怎样才能让 + 符号留在原地并避免这种跳跃效果呢？非常感谢您提供的所有帮助。

Answer 1

另一种选择:

清除 float ，我猜现在 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>