Question

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

鉴于以下（完全运行和复制并粘贴就绪）示例，我有两个奇怪的问题（在IE和Firefox上都会出现）：

1。）当行<div id="notexid" style="clear:both;">具有以下样式标记："style="clear:both;"时，问题是，切换显示不会“隐藏/滑动图层。无论何时单击链接，图层只会滑出（但这当然不是预期的。它应该在第一次点击时滑入并在下一次点击时滑出....）=＆gt;因此style="clear:both;"打破了jQuery切换功能，但为什么??

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

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

非常感谢!!

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

Answer 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">  </div>

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

更好的解决方案

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

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

现在，只有标签浮动。内容通常占用空间，让标签漂浮在附近。请注意添加overflow:hidden样式：这样可以防止超大儿童突破content块并破坏您的布局。

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

1 个答案:

问题

一种解决方案

更好的解决方案