5

检查此代码：http: //jsfiddle.net/ZXN4S/1/

HTML：

<div class="input">
    <input type="text" size="50" id="test_input">
    <input type="submit" value="send" id="test_submit">
</div>

<ul>
    <li class="clear">
        <div class="comment">
           <div class="image">
            <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
           </div>
           <div class="info">
             <div class="name">Name</div>
             <div class="text">text</div>
             <div class="timestamp">timestamp</div>
           </div>
        </div>
    </li>
</ul>

jQuery：

$(document).ready(function() {
    $("#test_submit").click(function() {
        $.post('/echo/json/', function(data) {
            last = $("ul li:first-child");
            new_line = last.clone();
            new_line.hide();
            last.before(new_line);
            new_line.slideDown('slow');
        });

        return false;
    });
});

如果您尝试在输入字段中插入一些文本并单击提交，您可以看到我正在谈论的问题。当它向下滑动时，幻灯片的高度是错误的，效果很丑。但是，如果您删除 divinfo效果很好。我该如何解决？

4

4 回答 4

1

环境：

ul li .info {
    float: left;
}

为我做的（在 chrome 中测试）

于 2011-11-20T01:19:34.080 回答
1

这个技巧似乎解决了这个问题：

ul li .info {
    float: right;
    width: 485px; // fixed width to the div
}
于 2011-11-20T01:30:12.073 回答
1

问题只是布局模型。您可以添加 overflow:hidden 以在大多数浏览器中为元素提供布局：

ul li .info {
  overflow: hidden;
}

也会解决的。您也可以选择固定宽度，但这不是必需的。

您实际上并没有要求的额外迂腐帮助：

您正在使用“return false”来阻止默认事件。有一个功能，它在事件如何冒泡方面更有效。只需将事件传递给函数（您可以使用任何您想要的名称，但为了清楚起见，我将其称为“事件”）然后调用preventDefault()它：

$("#test_submit").click(function(event) {
  event.preventDefault()
// ... the rest of your code ... //
});
于 2011-11-20T03:46:55.630 回答
0

在玩过 JS Fiddle 之后，这似乎成功了：

在你的 CSS 中，ul li .info { }

添加：height: 50px;

于 2011-11-20T01:08:58.210 回答