.slideToggle을 사용할 때 텍스트가 움직이지 않도록하려면 어떻게합니까?

Question

slide.Toggle을 사용하면서 텍스트가 움직입니다. 미리보기의 마지막 문장은 전환 할 때 바뀝니다. 미리보기 끝에 p 요소를 추가하면이 작업은 수행되지 않지만 단점은 원하지 않는 반환을 생성한다는 것입니다. 나는 그 문장이 어디에 있어야하는지 계속하고 싶다.

스크립트

<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery(".content").hide(); 
//toggle the componenet with class msg_body 
jQuery(".heading").click(function() 
{ 
jQuery(this).next(".content").slideToggle(1000); 
}); 
}); 
</script> 

HTML

<div class="layer1"> 

<span class="heading">During the most violent shocks of the Typhoon, the man at the Pequod's jaw-bone tiller had several times been reelingly hurled to the deck by its spasmodic motions, even though preventer tackles had been attached to it—for they were slack—because some play to the tiller was indispensable.</span> 

<span class="content">In a severe gale like this, while the ship is but a tossed shuttlecock to the blast, it is by no means uncommon to see the needles in the compasses, at intervals, go round and round. It was thus with the Pequod's; at almost every shock the helmsman had not failed to notice the whirling velocity with which they revolved upon the cards; it is a sight that hardly anyone can behold without some sort of unwonted emotion.</span></div> 

CSS 어떤 도움

.layer1 { 
margin: 20px; 
padding: 0; 
color: #bfbfbf; 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 1em; 
line-height: 1.2em; 
/* [disabled]text-align: justify; */ 
} 

.heading { 
cursor: pointer; 
text-align: left; 
} 

.content { 
padding: 0px; 
margin: 0px; 
clear: both; 
text-align: left; 
} 

감사합니다.

Answer 1

후 <div style="clear: both;"></div>를 추가해야합니다. 슬라이드 효과를 애니메이션화하려면 애니메이션 범위가 블록 요소로 변환되므로 관찰 가능한 텍스트 이동이 가능합니다. 전 세계에서 플로트 (또는 그 문제에 대한 인라인 블록)는 사용자가 선호하는 인라인 디스플레이를 흉내낼 수 없습니다.

가장 쉬운 해결책은 인라인 요소에서 작동 페이드 효과와 슬라이드 효과를 대체하는 것입니다 :/표시됩니다

jQuery(this).next(".content").fadeToggle(1000); 

레이아웃을 엉망으로하지 않고 콘텐츠 숨 깁니다.

Answer 2

당신은 당신이, 당신이 원하는 것을 정확히 즉 slideToggle을 달성하고 인라인 모두 스팬 요소를 유지할 수있을 것이라고 생각하지 않는다 <span class="heading">

<span class="heading">During the most violent shocks of the Typhoon, the man at the Pequod's jaw-bone tiller had several times been reelingly hurled to the deck by its spasmodic motions, even though preventer tackles had been attached to it—for they were slack—because some play to the tiller was indispensable.</span> 

<div style="clear: both;"></div> 

jsfiddle

Answer 3

포함 요소에 clearfix 클래스를 추가하십시오. 내가 그렇게 할 때

.clearfix:after, .receipt-share-btns:after, .tm-act-content:after { 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    line-height:0; 
    visibility:hidden; 
} 

.clearfix, .receipt-share-btns, .tm-act-content { 
    clear: both; 
} 

html[xmlns] .clearfix, html[xmlns] .receipt-share-btns, html[xmlns] .tm-act-content { 
    display:block; 
} 

* html .clearfix, * html .receipt-share-btns, * html .tm-act-content { 
    height:1%; 
}