0

我的侧边栏中有一个块。当调整到某个大小以下时，我把它放在我的主要内容中。当我将大小调整回原始大小时，我希望它回到原来的位置。问题是，这个块位于不同页面侧边栏中的不同位置。它总是只有一个，所以它有一个 ID，但有时它是第一个侧边栏项目，有时是第二个。

当我再次调整页面大小时，如何将这个东西放回它开始的地方？

例如，当我的页面宽度小于 640px 时，块 #foo 会使用 jQuery 移动到元素 #bar 下方。

        $("#bar").after($("#foo"));

一切都很好。但是，当我将大小调整回大于 640 像素宽的大小时#foo，显然除了 之外的所有内容都会弹回原位。我可以在侧边栏中选择一个位置并始终将其放回原处，无论它来自侧边栏中的哪个位置，但这并不好玩。

我知道可以使用诸如#baz :eq(n)在其中查找第 n 个项目之#baz类的方法...有没有一种方法可以在我移动它之前在其父元素$("#baz").getOrdinalPosition($(".parent-of-baz"));中找到它的位置，所以我知道将其放回哪里？#baz

4

2 回答 2

2

您可以只使用包装器<div>并将其放回包装器内以恢复其先前的位置，但我不太热衷于在 DOM 内移动元素。这通常不是做事的正确方式。最好有两个块实例并用display:none/block.

于 2013-09-27T22:13:20.910 回答
1

您可以使用 HTML5 数据属性来保存侧边栏块的顺序，然后您就会知道将其放回何处：

<div id="foo_block" data-sidebar-pos="1">Content</div>
<div id="bar_block" data-sidebar-pos="2">More Content</div>
<div id="other_block" data-sidebar-pos="3">Other Content</div>

然后，如果bar_block在主要内容中移动，它将保留其位置数据。放回去只是将它插入到具有下一个最低侧边栏位置的块之后，或者如果位置为 1，则将其插入顶部。

于 2013-09-27T22:05:30.153 回答