jquery锚元素移动到新行隐藏

我是新来的JQuery（和JavaScript/AJAX一般），并遇到与隐藏元素的问题。jquery锚元素移动到新行隐藏

当我使用下面的代码动画作品和元素被隐藏，但因为它被隐藏它将被移动到一个新的行以及它后面的所有内容。这种情况发生在水平隐藏，但不透明。

有没有办法阻止这种情况发生，或者我在某处丢失了某些东西？该链接出现在这样一行：

相关标签： 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"); 
    }); 
});

由于事先

戴夫

来源

2009-12-07 DavidM

问题解决了，多谢你们！ – DavidM 2009-12-07 14:32:28

它发生的原因是您正在为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>

来源

2009-12-07 13:43:08

转移一样，很可能把它变成一个块级元素，将它放在一个新的生产线将是可见的。我会建议：

a { float: left; }

这将他们都变成块，但保持它们并排。我也建议使用：

$(this).slideUp();

而不是动画高度。

来源

2009-12-07 13:38:27 cletus

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

至于如何解决它，我不是100％肯定这会工作，但也许如果你指定一个“display：inline-block”风格为你的锚标记这可能会解决这个问题（内联块会让他们有一个高度，仍然像你期望的那样）。如果你想让它们全部显示“display：block; float：left;”我很确定那也能解决它。

来源

2009-12-07 13:38:53 fyjham

jquery锚元素移动到新行隐藏

回答

相关问题