Undesired "flashing" in Jquery dropdown menu?
- by Tom
Hi,
I've got the following piece of Jquery:
$("#collapse-menu > li > a").click(function() {
$(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});
What it basically does is expands or collapses a menu of nested "lists" which contain dropdowns (simplified example):
<ul id="collapse-menu">
<li><a class="expanded">Basic Details</a>
<ul>
<li>
<select> .... </select>
</li>
<li>
<select> .... </select>
</li>
The code works absolutely fine EXCEPT when a large value is selected in any of the dropdowns. At that point, when clicked, the menu will still expand/collapse correctly but "flash" quickly while doing so, as if the entire element was being reset somehow. The data itself is fine but it's the flashing that's unwanted.
The strange thing is that if a small value is selected in a dropdown, there's no flashing. When a large value is selected (say, above 30 in an age dropdown of 18-99), the flashing starts happening.
Can anyone tell me why this is happening? Or whether there's something not right about the Jquery that's causing this.
Thanks.
UPDATE:
Adding a bounty to this. Have tried a few similar plugins/solutions out there on the net but they all seem to suffer from this "flashing" problem when large dropdown values are selected by default.
If it helps, here's a typical similar solution: http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ... but it suffers from the same problem when dropdowns are added inside the accordion.
I hope someone has a clean solution, instead of needing to hack this somehow.
