How to collapse a submenu when clicked again - javascript

I'm relatively new to JS and I can't figure out how to close a submenu when clicked again (or if anything else is clicked, like the button which makes the menu appear.
With this thread here on Stackoverflow I managed to open the submenu on click on the parent, but how can i close it again by click it again? Other threads that I found by google didn't help me at all...
HTML
<ul id="menu">
<li>Home</li>
<li>In the news
<ul>
<li>Youtube</li>
<li>Blog</li>
</ul>
</li>
<li>Who's Who?
<ul>
<li>Youtube</li>
<li>Tackle Hunger Tackle Hunger</li>
</ul>
</li>
<li>Services Offered</li>
JS
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$('#menu ul').hide('normal');
$(this).next().slideToggle('normal');
});
}
$(document).ready(function() {
initMenu();
});
When I click it again, it closes and then opens up again... Really thanks a lot for helping me with this problem!
Here is also the jsfiddle of the other thread

Simply add an if and check if the next element is hidden.
Without the if, you will trigger hide and show twice by clicking on the same element.
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(function() {
$('#menu ul').hide('normal');
// check if the next element is hidden
if($(this).next().is(":hidden")) {
$(this).next().slideToggle('normal');
}
});
}
$(document).ready(function() {
initMenu();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Home</li>
<li>In the news
<ul>
<li>Youtube</li>
<li>Blog</li>
</ul>
</li>
<li>Who's Who?
<ul>
<li>Youtube</li>
<li>Tackle Hunger Tackle Hunger</li>
</ul>
</li>
<li>Services Offered</li>
</ul>

Related

jQuery click() and on() function

I'm trying to add "active" class to menu when user clicks on the button but for some reason it's not working correctly. They have to click really fast and two times. I've tried both click and on click function but still not working.
$('#menu li').click(function() {
$('#menu li.active').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="menu">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Services
</li>
<li class="nav">Gallery
</li>
<li class="nav">Contact
</li>
</ul>
</div>
you must handle active li after page loaded.Add this at the end of your code:
var curruntLocation = window.location.href;
$('#menu li a').each(function ()
{
var thisHref = $(this).attr('href');
if (curruntLocation.indexOf(thisHref) > 0)
{
$(this).parent().addClass('active');
}
});
The links included in the menu items are reloading the page while clicking and when the page is reloaded, the initial setting comes first. You can use preventDefault() if you'd like to run the function but then, your links won't work.
I suggest you use anchors instead of query string.

Jquery show or hide children link if it is available

I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>
This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/

how to active parent ul li after page refresh or click on sub menu link

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>
You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>

js nav to remain opened when on visited link

Again using this, the best place on the net, to try and resolve a question of a poor designer with extremely limited developer skills;
I have this js nav bar which I need to remain opened once I click on one of the links within the dropdown link. It's hard for me to explain but I'm sure once you see it you'll understand what I mean:
<div id="Nav">
<ul>
<li>Inicio</li>
<li>Historia</li>
<li>Quiénes</li>
</ul>
<ul id="nav">
<li>Galería
<ul class="SubLinks">
<li>Proyecto1</li>
<li>Proyecto2</li>
<li>Proyecto3</li>
</ul>
</li>
</ul>
<ul>
<li>Contacto</li>
</ul>
</ul>
</div>
JS
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
Anyone can help?
Thanks guys!!

jQuery drop down menu - hide inner ul when user clicks anywhere outside inner ul

I have a jQuery drop down menu and everything works well except when the user clicks outside of the inner ul (e.g. the rest of the body or document) the inner ul does not pull back up. Any ideas? Here's my code:
$(document).ready(function() {
$("#cp-nav ul li").click(function() {
$("#cp-nav ul ul").slideUp("fast", function(){});
$("ul", this).slideDown("fast", function(){
$("ul", this).slideUp("fast");
});
});
});
So maybe do something like:
$("ul", !this).slideUp("fast", function(){});
I am kind of new to jQuery and JavaScript, and I tried to look around for my problem but it's kind of difficult to phrase. I also noticed there is a callback function for jQuery's slideUp, and I can not figure out how to use it. Any help? It would be much appreciated! :-)
Edit
HTML:
<nav id="cp-nav">
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Design Platforms</li>
<li>3D Animation</li>
<li>Graphic Design</li>
<li>Python</li>
</ul>
</li>
<li>
About
<ul>
<li>Company History</li>
<li>CEO & Founder</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</li>
<li>
etc.
<ul>
<li>etc.</li>
<li>etc.</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</li>
</ul>
</nav>
This would do it
$(document).ready(function() {
$("#cp-nav").click(function(e){
e.stopPropagation(); // this stops the bubbling from going any higher
});
$('body').click(function(){ // this is only reached if the clicks comes outside the #cp-nav
$("#cp-nav ul ul").slideUp('fast');
});
$("#cp-nav ul li").click(function() {
$("#cp-nav ul ul").slideUp("fast", function(){});
$("ul", this).slideDown("fast", function(){
$("ul", this).slideUp("fast");
});
});
});

Categories

Resources