Question

我有一个包含其他div的div。像这样：

<div id='wrapper'>
   <div id='box1' class='boxes'></div>
   <div id='box2' class='boxes'></div>
   <div id='box3' class='boxes'></div>
</div>

点击某些按钮会发生这种情况：

changes function(num){
    $box="box"+num;
    $(".boxes").hide('fast');
    $("#"+$box).show('fast');

  };

或

  changes function(num){
    $box="box"+(num);
    $(".boxes").hide('fast',function(){
          $("#"+$box).show('fast');
    });

  }

的CSS：

   html,body{height:100%};
  .boxes{dispaly:hidden};
   #box1{display:block};

当show和height发生时，包装器的高度会改变。我希望在展示期间固定包装器的高度并隐藏发生。因为盒子的数量是可变的，所以我不能设置包装器高度，例如：height = 400px; 所有箱子都有相同的高度。

Answer 1

由于事件管道，您无法移植并且在DOM渲染的预期设计中执行您要执行的操作。我认为你希望在假设子对象大小相同的情况下，在更改其中的可查看内容时暂停父级的大小调整。

一个相对便携的方法是使用祖父母和父div，将子div内嵌在父内部并将溢出设置为隐藏，以便您可以在JavaScript中将父div放在祖父中。

外观可能是您想要的，但您可以依赖于正确设置的父级的最小宽度和高度的大小，即使在各种放大率以及Web和移动设备显示中也是如此。

正确地执行此操作需要技巧和相当多的跨浏览器测试。如果您使用经过良好测试的JQuery或AngularJS组件来为您提供顺畅的功能，那将会更加精明。

另一种方法是将子对象放在同一位置并改变它们的z位置。为div使用纯色背景。这可能比前两段中的方法稍微简单一些。您希望子对象上没有边框，父对象的背景颜色与子项相同。

即使是这种不太复杂的解决方案也可能不必使您的页面设计干净直观。我建议重新考虑您的设计并符合您的演示要求，以便更加贴近常见浏览器的内置DOM渲染功能。

Answer 2

我已将样式和脚本更改为：

.boxes{dispaly:hidden;min-width:100%};
 #box1{display:inline-block};

和

    $(".boxes").css('display','none');
    $("#"+$box).css('display','inline-block');

并且它运作良好。