javascript - Using jQuery with collapse menu -

currently side menu consists of parent , child pages. keep menu expanded on child page having use switch statement , check if url looking , if matches show 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 on 20 pages need display child elements. question is, way or know better way? in advance help.

note

i want display relevant child elements on active child page. suppose, click on childone when redirected page want see child elements under parent.

my mark-up 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> 

i have added code in order able reproduce issue. added classes parent items of menu can check them later in order hide or not children. class names page name (final word on url) unique. using substring method.

in example, current page second option, , using each() function of jquery, can go through elements without having 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 class name element contains string 'display'              alert("i current page 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>