gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:42:23 24 4
gpt4 key购买 nike

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

给出以下(完全运行并准备好复制和粘贴)示例,我有两个奇怪的问题(在 IE 和 Firefox 上都发生):

1.) 当有 <div id="notexid" style="clear:both;"> 行时具有以下样式标签:"style="clear:both;" ,问题是 Toggle Display 不会“在图层中隐藏/滑动。每当您单击链接时,图层只会滑出(但这当然不是故意的。它应该在第一次单击时滑入并滑出在下一次点击....) => 所以 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>

最佳答案

问题

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

一个解决方案

一个简单(且常见)的解决方法是在 float 子元素之后简单地放置一些东西,设置为清除它们,从而强制父元素具有高度 - 例如:

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

但这很丑陋。您必须修改您的标记,并不断添加这些额外的尾随元素,无论您是否需要它们。

更好的解决方案

相反,我建议修改您的样式以减少 float 元素的数量:

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

现在,只有标签 float 。内容正常放置并占用空间,让标签漂浮在附近。请注意添加的 overflow:hidden 样式:这可以防止超大 child 突破 content block 并破坏您的布局。

关于jquery - 为什么这个简单的 jQuery 切换动画不能正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1429298/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com