Using jQuery with collapse menu

Question

Currently my side menu consists of parent and child pages. To keep the menu expanded on the child page I am having to use a switch statement and check if the url is what I am looking for and if it matches show the expanded child items.

 $(function () {
        var url = window.location.pathname;
        switch (url) {
            case 'Path1':
                $('#ChildOne').show();
                break;
            case 'Path2':
                $('#ChildTwo').show();
                break;
            case 'Path3':
                $('#ChildThree').show();
                break;
            ...
        }
    });

I've got over 20 pages where I need to display the child elements. My question is, is this the only way or does someone know a better way? Thanks in advance for your help.

Note

I only want to display the relevant child elements on active child page. Suppose, I click on ChildOne when I get redirected to that page I only want to see the child elements under that parent.

My mark-up is as follows

<ul>
    <li class="parent"><a style="cursor: pointer;">Parent One</a>
        <ul class="child" id="ChildOne">
            <li><a href="#">Child Of Parent One</a></li>
            <li><a href="#">Child Of Parent One</a></li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Two</a>
        <ul class="child" id="ChildTwo">
            <li><a href="#">Child Of Parent Two</a></li>
            <li><a href="#">Child Of Parent Two</a></li>
            <li><a href="#">Child Of Parent Two</a></li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Three</a>
        <ul class="child" id="ChildThree">
            <li><a href="#">Child Of Parent Three</a></li>
            <li><a href="#">Child Of Parent Three</a></li>
        </ul>
    </li>
   ...
</ul>

Answer 1

I have added some code in order to be able to reproduce the issue. I added some classes to the parent items of the menu so that I can check them later in order to hide or not their children. The class names are the page name (final word on the url) which is unique. I get it using the substring method.

In this example, your current page is the second option, and by using the each() function of jquery, you can go through the elements without having a ton of switch cases or if statements.

Fiddle

Code snippet:

function escocha() {
    var url = '/about/profile'
    var n = url.lastIndexOf("/");
    var myClassName = url.substring(n + 1, url.length)

    alert("The url: " + url);
    alert("The class name: " + myClassName);

    $(".child").each(function (index) {
        alert(this.id);
        if (this.className.indexOf(myClassName) > -1) { // if any class name for this element contains the string 'display'
            alert("I am the current page so my menu items won't collapse!");
        } else {
            $('#' + this.id).hide();
        }
    });
}

$("#esmaga").click(function () {
    escocha();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="parent"><a style="cursor: pointer;">Parent One</a>

        <ul class="child display" id="ChildOne">
            <li><a href="#">Child Of Parent One</a>

            </li>
            <li><a href="#">Child Of Parent One</a>

            </li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Two</a>

        <ul class="child profile" id="ChildTwo">
            <li><a href="#">Child Of Parent Two</a>

            </li>
            <li><a href="#">Child Of Parent Two</a>

            </li>
            <li><a href="#">Child Of Parent Two</a>

            </li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Three</a>

        <ul class="child display" id="ChildThree">
            <li><a href="#">Child Of Parent Three</a>

            </li>
            <li><a href="#">Child Of Parent Three</a>

            </li>
        </ul>
    </li>...</ul>
<button id="esmaga">Esmaga</button>

Answer 2

you can use id of ULs elements same as window.location.pathname. In this case you can call:

try{
   $("#"+window.location.pathname).show();
}catch(e){
   // error handling
}

but your menu is strange ;)

OK, one more version with object

var oPath = new Object({
        "Path1":"ChildOne",
        "Path2":"ChildTwo",
        "Path3":"ChildThree"
});

try{
     $("#"+ oPath[window.location.pathname]).show();
}catch(e){}