Jquery 锚元素在隐藏时移动到新行答案

【问题标题】：Jquery Anchor Elements Moving to New-Line on HideJquery 锚元素在隐藏时移动到新行
【发布时间】：2009-12-07 21:43:08
【问题描述】：

我是 JQuery（以及一般的 JavaScript/AJAX）的新手，遇到了隐藏元素的问题。

当我使用动画下面的代码时，该元素被隐藏了，但是当它被隐藏时，它会连同它之后的所有内容一起移动到一个新行上。水平隐藏也会发生这种情况，但不透明度不会发生这种情况。

有没有办法阻止这种情况发生，还是我在某个地方遗漏了什么？链接出现在这样的一行中：

相关标签：Tag1 Tag2 Tag3

代码片段：

HTML

<script type="text/javascript" src ="JQuery.js"></script>
<script type="text/javascript" src ="test.js"></script>

<strong>Related Tags: </strong>

<a href=#>Tag1</a>
<a href=#>Tag2</a>
<a href=#>Tag3</a>

$(function() {
     $("a").click(function(event){
        event.preventDefault();
        $(this).animate({height: 'hide' },"Fast");
    });
});

提前致谢，

戴夫

【问题讨论】：

问题解决了，谢谢大家！

标签： jquery html ajax

【解决方案1】：

发生这种情况的原因是您正在为 height 属性设置动画。手动设置高度会阻碍视图，这就是为什么您要换行。

如果你没有问题，你可以切换到fadeOut进行隐藏，这可能不会导致同样的错误。否则，肮脏的解决方法将不得不在锚上设置float: left。为了成为一个简洁的解决方案，您必须将它们放在一个容器中，并 clear 它们（因为浮动对象不会占用其父项中的任何空间，除非它们被清除）

<p>
    <a style="float: left;">...</a>
    <a style="float: left;">...</a>
    <a style="float: left;">...</a>
    <div style="clear: both;"></div>
</p>

【讨论】：

【解决方案2】：

像这样移动可能会将其变成一个块元素，这会将它放在一个新的行上将是可见的。我建议：

a { float: left; }

这会将它们全部变成块，但使它们并排放置。我还建议使用：

$(this).slideUp();

而不是动画高度。

【讨论】：

【解决方案3】：

问题是内联对象不能在 HTML 中指定高度。我不确定这里到底发生了什么，但似乎 jQuery 通过将锚点更改为块级元素来进行补偿。

至于如何解决它，我不是 100% 确定这会起作用，但也许如果您为锚标签指定“显示：内联块”样式，这可能会解决问题（内联块允许他们有一个高度，仍然像你期望的那样表现）。如果你要让它们都“显示：块；浮动：左；”我很确定这也会解决它。

【讨论】：