如何在同时调整div大小时防止div跳跃？

Question

我正在尝试调整这些div，以便当您单击其中一个时，其他人变得更小并且变得隐藏，并且被点击的人占据了整个宽度。 但是，看起来div被单击后其余的div被隐藏起来，达到100％的宽度，使得div在屏幕上跳转并重新备份。

是否有办法避免这种情况？ 我是新来的jquery，只是试验，我已经尝试了很多不同版本的代码，但他们都结束了同样的问题。

<div> 
    <div id="kg-left" class="role-container role-container-left" style="margin-left:1%;text-align: center;float: left;width: 31%;border: solid;border-width: 1px;padding: 1%;height: 138px;"> 
     SOME TEXT 
    </div> 

    <div id="kg-middle" class="role-container role-container-middle"style="margin-left:1%;margin-right:1%;text-align: center;float: left;width: 31%;border: solid;border-width: 1px;padding: 1%;height: 138px;"> 
     MORE TEXT 
    </div> 

    <div id="kg-right" class="role-container role-container-right"style="margin-right:1%;text-align: center;float: left;width: 31%;border: solid;border-width: 1px;padding: 1%;height: 138px;"> 
     EVEN MORE TEXT 
    </div> 
<div> 
<div>rest of html</div> 

最后一个代码我使用：

var roleContainerLeft = $("#kg-left"); 
var roleContainerMiddle = $("#kg-middle"); 
var roleContainerRight = $("#kg-right"); 

var mainMenu = $("#site-header-menu"); 

var state = 'showAll'; 

roleContainerLeft.click(function(){ 
    if(state == 'showAll') { 
     containerSpacers.slideToggle(2000); 
     roleContainerMiddle.slideToggle(2000); 
     roleContainerRight.slideToggle(
      2000, 
      function(){ 
       roleContainerLeft.css('width', '100%'); 
      } 
     ); 
     mainMenu.fadeTo(2000, 1); 
     state = 'left'; 
    } 
}); 

roleContainerMiddle.click(function(){ 
    if(state == 'showAll') { 
     roleContainerLeft.addClass('shrink'); 
     roleContainerRight.addClass('shrink'); 
     $(".shrink").animate(
      { 
       width: '0%', 
      }, 
      2000, 
      function(){ 
       $(this).hide(); 
      } 
     ); 
     $(".shrink").css('margin', '0%'); 

     roleContainerMiddle.animate(
      { 
       width: '100%', 
      }, 
      2000, 
      function() { 
       roleContainerMiddle.css('width', '100%'); 
      } 
     ); 
     roleContainerMiddle.css('margin', '0%'); 
     mainMenu.fadeTo(2000, 1); 
     state = 'middle'; 
    } 
}); 

roleContainerRight.click(function(){ 
    if(state == 'showAll') { 
     containerSpacers.slideToggle(2000); 
     roleContainerMiddle.slideToggle(2000); 
     roleContainerLeft.slideToggle(
      2000, 
      function(){ 
       roleContainerRight.css('width', '100%'); 
      } 
     ); 
     mainMenu.fadeTo(2000, 1); 
     state = 'right'; 
    } 
}); 

这只是我的最新实验中，我一直在使用简单的.slideToggle（）等，但无论我尝试，我一直具有“跳跃”的问题尝试。 感谢您的帮助，我一直在敲我的头靠在墙上2天现在:)

Answer 1

尝试使用.siblings()降低没有点击到7.5%元件width，设置点击元件width到80%。这应该总共为95％，为元素之间的空间留下5％的视口宽度。设置cssdisplay到inline-block，overflow到hidden到元素中剪辑的文字，width设置为30%均匀空间视口内三个div元素

$("[id^=kg]").click(function() { 
 
    $(this).siblings() 
 
    .animate({ 
 
    width:"7.5%" 
 
    }, 500); 
 
    $(this).animate({ 
 
    width:"80%" 
 
    }, 500) 
 
})

div[id^="kg"] { 
 
    width: 30%; 
 
    height: 138px; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <div id="kg-left" class="role-container role-container-left"> 
 
     SOME TEXT 
 
    </div> 
 

 
    <div id="kg-middle" class="role-container role-container-middle"> 
 
     MORE TEXT 
 
    </div> 
 

 
    <div id="kg-right" class="role-container role-container-right"> 
 
     EVEN MORE TEXT 
 
    </div> 
 
<div> 
 
<div>rest of html</div>

Answer 2

1. 三个div的总宽度超过100％！

宽度（。左）=宽度（.right）=宽度（31％）+填充（1％* 2）+利润率左（1％）+边界（1px的* 2）> 35％

宽度（.middle）=宽度（31％）+填充（1％* 2）+裕度（1％* 2）+边界（1px的* 2）> 35％

所以，在初始状态的外观（in chrome）

1. 如何修复跳转？ 假设你已经修复了上面的宽度问题，你所需要做的就是减少中间最后一个状态的宽度。例如。

roleContainerMiddle.animate( { width: '90%', // not 100%! Because of border and padding's width! }, 2000, function() { roleContainerMiddle.css('width', '100%'); } );