SO Help: fadeIn working on hover but not onClick/click

http://stackoverflow.com/questions/20335942/fadein-working-on-hover-but-not-onclick-click/20336016#20336016

by SpYk3

HTML

<nav>
    <ul>
        <li class="itm">A
            <ul>
                <li>One</li>
                <li>Two
                    <ul>
                        <li>Menu Item</li>
                        <li>Menu Item</li>
                        <li>Menu Item</li>
                    </ul>
                </li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </li>
        <li class="itm">B
            <ul>
                <li>One</li>
                <li>Two
                    <ul>
                        <li>Menu Item</li>
                        <li>Menu Item</li>
                        <li>Menu Item</li>
                    </ul>
                </li>
                <li>Three</li>
                <li>Four
                    <ul>
                        <li>Menu Item</li>
                        <li>Menu Item</li>
                        <li>Menu Item</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

ul ul {
    display:none;
}
li:hover { background: #AAF; }
li li:hover { background: #AFA; }
li li li:hover { background: #FAA; }
nav {
    cursor: pointer;
}

JavaScript

$('ul li').click(function (e) {
	e.stopPropagation();
	var ul = $(this).children('ul');
	
	$(this).siblings().each(function(i) {
		var ul = $(this).children('ul');
		if (ul.length) if (ul.is(':visible')) {
			ul.find('ul').fadeOut('fast');
			ul.fadeOut('fast');
		}
	});
	
	if (ul.length) {
		if (ul.is(':visible')) {
			ul.find('ul').fadeOut('fast');
			ul.fadeOut('fast');
		}
		else ul.fadeIn('fast');
	}
});