왜 jQuery 토글 기능이 내 div의 너비를 변경합니까?

Question

두 개의 div를 전환하고 하나를 숨기고 다른 것을 표시하는 데 사용할 버튼이 있습니다. 첫 번째 div는 괜찮은 것으로 표시되지만 전환이 발생하고 두 번째 div가 표시되면 너 비가 최소화되고 동일하지 않습니다.

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

내 div의

은 다음과 같습니다 : 나는 두 개의 그래프를이 문제를 제거하고 만들 수있는 방법

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

(div의)을 함께 보여

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

이

는 jQuery 코드입니다 정상적인 너비, 토글 기능의 영향을받지 않습니까?

도움이 매우 감사합니다.

Answer 1

CSS에 고정 폭을 지정하십시오. 예컨대 :

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

당신에 가장 적합하고 더 이상 너비를 변경하지 않는 경우 폭을 찾기 :

div.graph { width: 500px;} 

또는 인라인 스타일로

.

Answer 2

div의 내용 때문에 너비를 변경하지 않으려는 경우 그래프 클래스에서 너비를 추가하기 만하면됩니다.

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