• 0

JS assistance. on click dropdown.


Question

I have written a drop down menu. Originally it was a hover over to drop window however it kept freaking out would flash and not let you click on stuff, at either rate. I attempted to convert it to an On click function. However, once you click it, it does not go away you cannot click it again or click elsewhere on the screen and make it go away without just refreshing the page.

what did I do wrong?

Using Jquery if it matters.


$(document).ready(
	function() {
		$('#nav li').click(
			function() {
				$(this).children('ul').stop(true, true);
				$(this).children('ul').slideDown('fast');
				$(this).addClass('menuClick');
			},
			function() {
				$(this).children('ul').delay(1000).stop(true, true);
				$(this).children('ul').slideUp('fast');
				$(this).removeClass('menuClick');
			}
		);
	}
);

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Try switching 'click' to 'toggle', so it becomes:


$(document).ready(
	function() {
		$('#nav li').toggle(
			function() {
				$(this).children('ul').stop(true, true);
				$(this).children('ul').slideDown('fast');
				$(this).addClass('menuClick');
			},
			function() {
				$(this).children('ul').delay(1000).stop(true, true);
				$(this).children('ul').slideUp('fast');
				$(this).removeClass('menuClick');
			}
		);
	}
);

The issue is that hover is meant to handle two events: when the mouse enters, and when it leaves. The 'click' event doesn't fire two events, but 'toggle' will.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.