Hi all,
here' the code
$(document).ready(function(){
$("ul li ul").hide();
$("li:has(ul)").click(function(){
$this = $(this);
if ($this.siblings().find('ul:visible').size()!=0)
{
$this.siblings().find('ul:visible').slideUp(1000, function(){
$this.find('ul:hidden').slideDown(500);
});
} else {
$this.find('ul:hidden').slideDown(500);
}
});
$("li:has(ul:hidden)").mousedown(function(){
$(this).css("background-color","#869094");
}).mouseup(function(){
$(this).css("background-color","#7793ae");
});
$("li > ul > li").mousedown(function(){
$(this).css("background-color","#a5ccef");
}).mouseup(function(){
$(this).css("background-color","#d9ebf1");
});
});
The problem is the li:has(ul:hidden) part - line 19. The event triggers regardless of whether the ul is hidden or has been 'slid down' i.e. visible.
Interestingly if I change it to li:has(ul:visible) it never triggers.
I have tried
("li > ul:hidden").parent("li"), but get the same effect.
Can anyone point out what i'm doing wrong?
Many thanks