Expand parent menu if child menu is selected - javascript

I have a menu with sub child menus. The problem I am facing is that whenever I select a child menu after page loads, the menu collapses. I want to open the parent menu expanded.
The HTML Code is:
<div id='cssmenu'>
<ul>
<li><a href='http://internallink.com/home'><span>Home</span></a></li>
<li class='active has-sub'><a href='http://internallink.com/products'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='http://internallink.com/product1'><span>Product 1</span></a>
<ul>
<li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
<li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://internallink.com/product2'><span>Product 2</span></a>
<ul>
<li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
<li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://internallink.com/about'><span>About</span></a></li>
<li class='last'><a href='http://internallink.com/contact'><span>Contact</span></a></li>
</ul>
</div>
The JS is:
jQuery(document).ready(function () {
jQuery('#cssmenu').on("click","li.has-sub .holder",function () {
var element = jQuery(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
jQuery('#cssmenu ul li.has-sub').prepend('<span class="holder"></span>');
});
How can i expand the parent menu if child menu is selected.
Fiddle: https://jsfiddle.net/x415mjfq/

You have the full, absolute URL's in the links; that can be used to your advantage. Simply use document.querySelector with the square bracket selector, and the location.href property:
document.querySelector("a[href='" + location.href + "']").classList.add("selected");
Then, do whatever you need to do to it. In this example, I'm adding the selected class.
Fiddle

Related

Show first level children of a nested ul li using jquery

I have an HTML file like this:
JS:
function functionName(event) {
event.stopPropagation();
var item = event.data.param;
document.getElementById("list").innerHTML = item;
}
$(document).ready(function() {
$("li").each(function() {
$(this).on('click', {param: this.id}, functionName);
});
});
HTML:
<div id="main">
<div id="tree">
<ul class="xyz">
<li class="hide">AVC</li>
<li class="hide">Anna</li>
<li class="hide">Peter</li>
<li id="foo1">Gary
<ul class="xyz">
<li class="hide">John</li>
<li class="hide">Anna</li>
<li id="foo2">Briton
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo3">Layla
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo4">Undertaker
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="list"></div>
</div>
I have two div tags whose id is receptively tree and list. Tree div contains the nested ul li tags and each li have unique id.
I want to show the first level children of a ul li tag. For example, when I am clicking on Gary, it should show the first level children ( John, Anna, Britton) in right div i.e. list.
Right now I am able to get the id of ul li element in list div when clicking any item.
How can I traverse the first level children of clicking element using jquery/javascript and display them in list div?
Thanks
Try using find() ,> ul selects the direct descendant
$('li[id^="foo"]').click(function(e){
e.stopPropagation();
var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
console.log(x[0])
$('#list').html(x);
$('#list .hide').show();
});
simple demo : https://jsfiddle.net/sk30mwud/4/
'$('#tree').on('click', 'li', function(){
$(this).find('> ul > li').toggleClass('hide');
return false;
})'
Can you please take a look at this approach:
It uses .contents().get(0).nodeValue to fetch the text present in child li nodes and not from its childerns if any.
function functionName(event) {
event.stopPropagation();
var item = event.data.param;
var names = [];
$("#" + item).children("ul").children("li").each(function() {
names.push($(this).contents().get(0).nodeValue);
});
$("#list").text(names.join(","));;
}
$(document).ready(function() {
$("li").each(function() {
$(this).on('click', {
param: this.id
}, functionName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main">
<div id="tree">
<ul class="xyz">
<li class="hide">AVC</li>
<li class="hide">Anna</li>
<li class="hide">Peter</li>
<li id="foo1">Gary
<ul class="xyz">
<li class="hide">John</li>
<li class="hide">Anna</li>
<li id="foo2">Briton
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo3">Layla
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo4">Undertaker
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="list"></div>
</div>

javascript horizontal menu click to open

Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle

How to change active menu and submenu item style

I'm trying to change the colour of active menu/submenu which is selected by user.
For example when Sub11 is clicked, Link 1 and Sub11 will both turn red. Likewise when Sub22 is clicked, Link 2 and Sub22 will be red.
ul a { cursor: pointer; }
.active { color:red;}
<ul>
<li class="active"><a>Link 1</a>
<ul>
<li><a>Sub11</a></li>
<li><a>Sub12</a></li>
</ul>
</li>
<li><a>Link 2</a>
<ul>
<li><a>Sub21</a></li>
<li><a>Sub22</a></li>
</ul>
</li>
<li><a>Link 3</a></li>
</ul>
try using jquery this code:
$('.link > a').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
$('.submenu > li').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
$(this).parent('ul').prev('a').addClass('active');
});
Explanation:
The first part: whenever you click on .link item you remove every other active item and set the clicked one to active.
The second part: whenever you click on a submenu item you remove active state from the previous item and set it to the clicked submenu item and its predecessor .link item
You gonna have to add classes link and submenu to your html like this:
<ul>
<li class="link">
<a class="active">Link 1</a>
<ul class="submenu">
<li><a>Sub11</a></li>
<li><a>Sub12</a></li>
</ul>
</li>
<li class="link">
<a>Link 2</a>
<ul class="submenu">
<li><a>Sub21</a></li>
<li><a>Sub22</a></li>
</ul>
</li>
<li class="link"><a>Link 3</a></li>
</ul>
Here is a fiddle

adding class active to submenu after reloading page

After clicking the li item, i added the active class with js but it leads to the other page and the active class disappears.
I am using bootstap navwalker so don't know how to use php code into it.
<div id="cssmenu" class="right-tabs">
<ul>
<li></li>
<li>
<ul role="menu" class=" dropdown-menu">
<li>link</li>
</ul>
</li>
<li>page</li>
</ul>
</div>
JS
$(document).ready(function(){
$(".dropdown-menu > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
});
Could you just add the class based on the url?
Example assuming your on a about page
$(function() {
var loc = window.location.href; // returns the full URL
if(/about/.test(loc)) {
$('.dropdown-menu > li .about').addClass('active');
}
});
in link.php, add active class
<div id="cssmenu" class="right-tabs">
<ul>
<li></li>
<li class="activeClass">
<ul role="menu" class=" dropdown-menu">
<li>link</li>
</ul>
</li>
<li>page</li>
</ul>

.click() functionality when clicking elements

Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});

Categories