当其他项目被隐藏时，我如何让事情向上移动？答案

【问题标题】：How do I make things move up in line when other items have been hidden?当其他项目被隐藏时，我如何让事情向上移动？
【发布时间】：2017-01-30 03:50:05
【问题描述】：

当我隐藏其他对象时，我试图让东西向上移动，但现在隐藏项目所在的位置只有一个空白空间。提前致谢！此外，here's a plunker 与页面本身。

CSS：

#filters {
top: 10;
left: 0;
height: 50px;
width: 100%;
position: fixed !important;
z-index: 999999;
text-align:center;
}

#filters a:visited {
color:#ffffff;
text-transform:uppercase;
font-style:italic;
background:#6fc8de;
padding:3px 10px 3px 10px;
margin-left:3px;
margin-right:3px;
text-decoration:none;
letter-spacing:1px;
}

#filters a:hover {
color:#6fc8de;
background:#202020;
}

Javascript：

<script>
$(document).ready(function() {
  $('filters').click(function(e) {
    e.preventDefault();
    console.log('not: ',$(".media").not("." + $(this).attr("rel")));
    $(".media").not("." + $(this).attr("rel")).hide();
    $("." + $(this).attr("rel")).show(500);
  });
});
</script>

HTML

    <span class="media filtera"><div id="characterbox">
</div></span>
    <span class="media filterb"><div id="characterbox">
 </div></span>
    <div id="topbar">
    <div class="topbartitle">The Characters</div>
    <a class="topbarnavi" href="/">Home</a>
    <a class="topbarnavi" href="/message">Request</a>
    <a class="topbarnavi" href="/verses">Verses</a>
    <br><br>
    <div class="links">
    <div id="filters">
    <a href="#" rel="media" class="filters">All</a>
    <a href="#" rel="filtera" class="filters">Filter A</a>
    <a href="#" rel="filterb" class="filters">Filter B</a>
    </div></div></div>

我试图将 html 分解为尽可能少的信息。

【问题讨论】：

HTML 是什么样的？请在您的问题中创建minimal reproducible example。另外，请考虑删除其中一个标签并添加 jQuery。
这取决于你的 html。如果你想让一堆元素在删除顶部元素时向上移动，那么你可能应该堆叠<div>s，然后为被删除元素的高度设置动画。由于 HTML 的性质，这些动作将转移到堆栈的其余部分。

标签： jquery css filter visibility show-hide

【解决方案1】：

将隐藏元素的高度设置为 0 应该会向上收缩所有元素。我通常会这样做，而不是尽可能隐藏元素。

【讨论】：

如何指定隐藏元素的高度？
$(this).height(0) 就像使用其他元素一样使用选择器。
这样吗？ $(".media").not("." + $(this).attr("rel")).hide() + $(this).height(0);
抱歉，我刚刚浏览了你的插件。您正在使用砌体进行布局，它根据一组项目设置项目位置。如果你想改变布局，从砌体中移除元素会更容易。 see this
恐怕你已经失去了我。如何更改代码以使用过滤器并使内容移动？我把它放在哪个脚本里？编辑：它们现在似乎可以正确过滤，但它们都堆叠在一起。