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

You have correctly set the UL to hidden/visible accordingly?

The 'if' statement runs okay and that is based on wether the UL is hidden or visible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.