Question

我有一个按钮，我想用它来切换两个div，隐藏一个，然后显示另一个。第一个div显示正常，但是当切换发生时，显示第二个div，其宽度最小化，并且不一样。

<button id="flipGraphs">Change</button>

我的div是以下内容：

<div class="graph hidden"><%= line_chart @weekly_graph %></div>
<div class="graph"><%= line_chart @daily_graph %></div>

这是jQuery代码：

<script>     
  $(document).ready(function(){ 
    $('#flipGraphs').click(function(){
      $('.graph').toggle();         
    });     
  }); 
</script>

如何消除此问题，并使两个图形（div）以正常宽度显示，并且不会受到切换功能的影响？

非常感谢任何帮助。

Answer 1

在你的CSS中给它一个固定的宽度。 e.g：

div.graph { width: 500px;}

或作为内联样式：

<div class="graph hidden" style="width: 500px;"><%= line_chart @weekly_graph %></div>
<div class="graph" style="width: 500px;"><%= line_chart @daily_graph %></div>

找到最适合你的宽度以及不再改变宽度的宽度。

Answer 2

可能因为div中的内容，如果你不想改变宽度，只需在图类中添加宽度。

.graph {
    width : 200px;//depends on your data
}

为什么jQuery切换功能会改变我的div的宽度？

2 个答案: