Question

我是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>

JS

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

先谢谢，

戴夫

Answer 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>

Answer 2

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

a { float: left; }

将它们全部变成块然后将它们并排放置。我还建议使用：

$(this).slideUp();

而非动画高度。

Answer 3

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

至于如何解决它，我不是百分百肯定这会起作用，但是如果你为你的锚标签指定一个“display：inline-block”样式，这可能会解决问题（内联块会允许）他们有一个高度，仍然按照你的预期行事）。如果你要将它们全部变成“display：block; float：left;”我很确定也会解决它。

Jquery Anchor元素在Hide上移动到New-Line

3 个答案: