Question

我正在尝试调整这些div的大小，以便当您单击其中一个时，其他div变小并变为隐藏，并且单击的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

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

宽度（.left）=宽度（.right）=宽度（31％）+填充（1％* 2）+边距 - 左（1％）+边框（1px * 2）＆gt; 35％

宽度（。中间）=宽度（31％）+填充（1％* 2）+边距（1％* 2）+边界（1px * 2）> 35％

因此，初始状态如下所示。（在chrome中）

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

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

Answer 2

尝试使用.siblings()减少width未点击7.5%的元素，将点击的元素width设置为80%。这应该总共95％，为视图之间的空间留出5％的视口宽度。将css display设置为inline-block，将overflow设置为hidden，以便在元素中剪切文本，将width设置为30%以均匀分配空间视口中的三个div元素

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当同时调整div时，如何防止div的“跳跃”？

2 个答案: