Question

我正在使用一些jQuery代码隐藏列表项...

 $("ul.items").each(function() {
    $("li:gt(4)", this).hide();

我的问题是.hide似乎隐藏了元素，但仍然分配了它的空间。

有没有办法删除这个空间...就像CSS上的display:none一样？

更新：.hide实际上是带走元素，但其他元素没有向上拉伸以占用元素留下的空白。

Answer 1

嗯那不应该发生。 $.fn.hide()设置display: none;而非visibility: hidden;或opacity: 0;（这会隐藏元素，但会占用空间）。

“这大致相当于调用.css（'display'，'none'），除了将display属性的值保存在jQuery的数据缓存中，以便稍后可以将显示恢复到其初始值” - 来自http://api.jquery.com/hide/

编辑：你有没有用Firebug（或类似的）检查元素实际发生了什么？

Answer 2

您还必须在每个元素之后隐藏/显示每个html空间。我也遇到了同样的挑战，经过上面的评论后，我解决了这个问题。就我而言，我用<br>分隔了元素，因此即使隐藏后，这些<br>也不会被隐藏。我的情况如下：

html

<article> ... </article><br>
<article> ... </article><br>
<article> ... </article><br>  // etc.

jquery：

$(ele).on('keyup', function() {
    var articles = $('main').find('article');
    var articles_le = articles.length;
    var i;
    for (i=0; i<articles_le; i++) {
        article = articles.eq(i);
        if ($(compare)) {
            article.show();
            article.next().show();
        } else {
            article.hide();
            article.next().hide();
        }
    }
});

这有效地删除了<br>创建的空格

JQuery hide不会删除对象的空间？

2 个答案: