Using jQuery with collapse menu
Currently my side menu is composed of parent and child pages. In order for the menu to expand on a child page, I need to use an operator switch
and check if the url is what I'm looking for and if it matches the expanded children being displayed.
$(function () {
var url = window.location.pathname;
switch (url) {
case 'Path1':
$('#ChildOne').show();
break;
case 'Path2':
$('#ChildTwo').show();
break;
case 'Path3':
$('#ChildThree').show();
break;
...
}
});
I have over 20 pages where I need to display 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 corresponding child elements on the active child page. Suppose I click ChildOne
when redirected to this page, I only want to see the children of this parent.
My inscription looks like this
<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>
source to share
I have added some code to reproduce the problem. I added some classes to the parent menu items to check later to hide or not their children. Class names are the name of the page (the final word on the URL) and is unique. I get it using the substring method.
In this example, your current page is the second option, and with each()
jquery function, you can step through the elements without having a ton of toggle cases or operators.
Snippet of code:
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>
source to share
you can use ULs element id just like window.location.pathname. In this case, you can call:
try{
$("#"+window.location.pathname).show();
}catch(e){
// error handling
}
but your menu is weird;)
OK, another version with object
var oPath = new Object({
"Path1":"ChildOne",
"Path2":"ChildTwo",
"Path3":"ChildThree"
});
try{
$("#"+ oPath[window.location.pathname]).show();
}catch(e){}
source to share