当一个DIV打开时,如何使文本停止移动?

时间:2016-08-16 13:11:38

标签: jquery html css

以下是我所说的: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/

那么我怎样才能使+符号保持原位并避免这种跳跃效应呢?非常感谢你的帮助。

0 个答案:

没有答案