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

我认为你不能完全达到你想要的效果，即slideToggle并保持两个span元素内联。要为幻灯片效果设置动画，动画范围将转换为块元素，因此可观察文本移位。世界上没有浮动（或内联块）将能够模仿您喜欢的内联显示。

最简单的解决方案是使用适用于内联元素的淡入淡出效果替换幻灯片效果：

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

这将显示/隐藏您的内容而不会弄乱布局。

Answer 2

您需要在<div style="clear: both;"></div>

之后添加<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类添加到包含元素。这是我在HTML 5 Boilerplate中使用的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%;
}

使用.slideToggle时如何阻止文本移动？

3 个答案: