Clicking On Some Menu While Others Closing

• Menu 1
  • submenu 1
  • submenu 2
    submenu 3
    • submenu 4<

Solution 1:

This can be done using a javascript/jquery plugin you will need to just do some googling to find one. You will just need to adjust the plugin according to your specifications.Once you find plugin and try to work with that, then you could come back here if you need help. It shows more effort when you have some solid code to show you have exhausted your talents. Study some of these I think you want an accordion menu if I understand correctly. Jquery

Solution 2:

You would probably be better off googling some different CSS menus and what not. However given your basic HTML there (provided its cleaned up, your missing a closing li tag or two) you could use the following:

jsFiddle

Script [_{Updated to show how i support the sub tags on the fiddle as well, keep in mind, you can edit this code to do as you please, ffor more information on how each part works, please see jQuery API}]

$("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]"));
    }
    else {
         $(this).css("cursor", "default");
    };
});

Clean HTML

<ul>
    <li>Menu1
        <ul>
            <li>submenu 1</li>
            <li>submenu 2
                <ul>
                    <li>submenu 3</li>
                    <li>submenu 4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Menu2
        <ul>
            <li>submenu 1</li>
            <li>submenu 2
                <ul>
                    <li>submenu 3</li>
                    <li>submenu 4
                        <ul>
                            <li>subsubmenu 1</li>
                            <li>subsubmenu 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    <li>
</ul>