Ваша помощь будет очень высоко ценится. Я потратил 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"> <\/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>