为什么这个简单的 jQuery 切换动画不能正常工作？答案

【问题标题】：Why doesn't this simple jQuery toggle animation work properly?为什么这个简单的 jQuery 切换动画不能正常工作？
【发布时间】：2009-12-01 14:33:53
【问题描述】：

非常感谢您的帮助。我花了 4 个小时试图弄清楚这一点，但没有成功，尽管这是一个非常简单的例子：

鉴于以下（完全运行并准备好复制和粘贴）示例，我有两个奇怪的问题（在 IE 和 Firefox 上都发生）：

1.) 当<div id="notexid" style="clear:both;"> 具有以下样式标签时："style="clear:both;"，问题是，切换显示不会“隐藏/在图层中滑动。每当您单击链接时，图层仅滑出（但这当然不是故意的。它应该在第一次单击时滑入并在下一次单击时滑出......）=>所以style="clear:both;" 打破了 jQuery 切换功能，但为什么呢？？

2.) 如果我删除style="clear:both;"（这似乎会导致此问题），那么我会得到另一个奇怪的行为，即要切换的元素显示（=幻灯片的渲染）不是在正确的位置，而是在右侧并在渲染到最终位置后跳转。但是为什么这个渲染是在右手边完成的，当它后来跳回正确的位置时？？？（所以 jQuery 知道正确的位置实际上在哪里......）

如果有人能确认这是 jQuery 中的一个奇怪错误，我将非常感激，因此我可以将其作为错误提交。或者如果有人能解决这个问题，那就更好了！

非常感谢！！

<!DOCTYPE HTML PUBLIC"-// W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
*.item {clear:both;}
*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; float:left; width:220px;}
  </style>

<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>


<body>
  <form method="GET" accept-charset="UTF-8" action="dddd">

    <div class="item">
      <span class="label">
        <label for="note">Label 0
        </label>
      </span>
      <span class="content">
        <textarea id="coafasf" name="casfasfasf" cols="30" rows="4">
        </textarea>
      </span>
    </div>


<script type="text/javascript">

        function toggleElement() {
          $("#notexid").slideToggle("slow");
        }

        $(document).ready ( function() {

          $("#notexid").before('<div class="item"><span class="label">&nbsp;<\/span><span class="content"><a href="javascript:toggleElement();"> CLICK HERE TO TOGGLE  <\/a><\/span><\/div>');

        }
        );

      </script> 


    <!-- INSERT style="clear:both;" Solves the formating Problem but results in a broken toggle -->

    <div id="notexid" style="clear:both;">
      <div class="item">
        <span class="label">
          <label for="note">Label 1
          </label>
        </span>
        <span class="content">
          <textarea id="test" name="test" cols="30" rows="2">
          </textarea>
        </span>
      </div>

    </div>      

    <div class="item">
      <span class="label">
        <label for="teasst">Label 2
        </label>
      </span>
      <span class="content">
        <input id="aaaaaa" name="asdfasfasf" type="text">
      </span>

    </div>


  </body>
</html>

【问题讨论】：

标签： jquery html css

【解决方案1】：

问题

您正在浮动所有可能提供div 高度的东西。因此，当 jQuery 对其进行动画处理时，它会检查高度以查看是否应该缩小或扩大它，它会看到 0 并决定扩大。每次。

一个解决方案

对此的一个简单（且常见）的解决方法是简单地在浮动子项之后放置一些东西，设置为清除它们，从而强制父项具有高度 - 例如：

<div id="notexid" style="clear:both;">
  <div class="item" >
    <span class="label"><label for="note">Label 1</label></span>
    <span class="content">
      <textarea id="test" name="test" cols="30" rows="2" ></textarea>
    </span>
  </div>

  <br clear="all"> <!-- you could probably find something less useless... -->

</div>

但这很难看。您必须修改您的标记，并不断添加这些额外的尾随元素，无论您是否对它们有任何用处。

更好的解决方案

相反，我建议修改样式以减少浮动元素的数量：

*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; width:220px; overflow:hidden; }

现在，只有标签浮动。内容正常放置并占用空间，让标签漂浮在附近。注意添加了overflow:hidden 样式：这可以防止过大的孩子突破content 块并破坏您的布局。

【讨论】：

你好Shog9，非常非常感谢！！！！这真的让我很头疼。感谢您的解释，我进一步搜索了这个问题，现在我明白出了什么问题。我自己永远无法解决这个问题。非常感谢！！！