I have some nested ULs where I slideToggle them by clicking on an img
in the parent LI.
Clicking at any particular level will briefly (split-second) reveal
the entire child UL, then it will disappear, then slide open as
expected. Clicking to slideToggle the child UL back (so that it is
hidden) performs as expected until it finally disappears - then there
is another split-second reveal of the whole child UL before it is
finally hidden.
This happens in IE6, but not in FF2 (no "fouc" in FF2).
The HTML:
<div id="div1">
<ul id="outer">
<li>
<img src="plus.gif"> Nest 1
<ul>
<li><img src="plus.gif"> Nest 1 1
<ul>
<li><img src="plus.gif"> Nest 1 1 1
<ul>
<li>oh, yeah</li>
</ul>
</li>
<li>Nest 1 1 2</li>
</ul>
</li>
<li><img src="plus.gif"> Nest 1 2
<ul>
<li>Nest 1 2 1</li>
<li>Nest 1 2 2</li>
</ul>
</li>
</ul>
</li>
<li>
<img src="plus.gif"> Nest 2
<ul>
<li>Nest 2 1</li>
<li>Nest 2 2</li>
</ul>
</li>
</ul>
</div>
The jQuery:
$(document).ready(function() {
$("#div1").find("ul:gt(0)").hide().end().find("ul > li >
img").click(function() {
if (this.src.search(/plus/)>0) {
$(this).attr("src", "minus.gif");
} else {
$(this).attr("src", "plus.gif");
}
$(this).next("ul").slideToggle();
return false;
});
});
Has anyone else experienced this?
Cam
