SO Help: Clicking on some menu while others closing

by SpYk3

HTML

<ul>
    <li>Menu 1
        <ul>
            <li>submenu 1</li>
            <li>submenu 2
                <ul>
                    <li>submenu 3</li>
                    <li>submenu 4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li>submenu 1</li>
            <li>submenu 2
                <ul>
                    <li>submenu 4</li>
                    <li>submenu 5
                        <ul>
                            <li>subsubmenu 8</li>
                            <li>subsubmenu 9</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>submenu 3
                <ul>
                    <li>submenu 6</li>
                    <li>submenu 7
                        <ul>
                            <li>subsubmenu 10</li>
                            <li>subsubmenu 11</li>
                        </ul>
                    </li>
                </ul>            
            </li>
        </ul>
    <li>
</ul>

CSS

ul li li { margin-left: 1em; }
ul li li li { margin-left: 2em; }
ul li li li li  { margin-left: 3em; }

JavaScript

$("ul > li > ul").hide();

$("ul > li").click(function(e) {
	e.stopPropagation();
	
	$(this).children().toggle(function(e) {
		if (!$(this).is(":visible")) {
			$(this).find("ul").hide();
			$(this).find("sub").show();
		};
	});
	
	$(this).siblings().each(function(i) {
		if ($(this).children("ul").length > 0) {
			if ($(this).children("ul").css("display").toLowerCase() == "block") {
				$(this).children().toggle(function(e) {
					if (!$(this).is(":visible")) {
						$(this).find("ul").hide();
						$(this).find("sub").show();
					};
				});
			}
		}
	});
});

$("ul > li").each(function(i) {
	if ($(this).children("ul").length > 0) {
		//	$(this).css("cursor", "pointer").prepend($("<sub />").text("[has submenu]"));
		$(this).css("cursor", "pointer").children("ul").before($("<sub />").text("[has submenu]"));
	}
	else {
		 $(this).css("cursor", "default");
	};
});