We Keep Coding

Wordpress Close theme menu after click

I am using this Wordpress theme, called ichiban.
I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$('.site-overlay-wrapper').hide();
});
});
For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.
SOLUTION
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$("body").removeClass("overlay-open");
});
});
Thank you all :)

You can try using jQuery .toggle() method.
Change this line:
$('.site-overlay-wrapper').hide();
To:
$('.site-overlay-wrapper').toggle();

This help?
jQuery( document ).ready(function($) {
var t = true;
$('#menu-main li a').on("click", function(){
if(t===true){
$('.site-overlay-wrapper').hide();
t=false;
}
else{
$('.site-overlay-wrapper').show();
t=true;
}
});
});
Here is working example:
jQuery( document ).ready(function($) {
var t = true;
$('#button').on("click", function(){
if(t===true){
$('.show').hide();
$(this).text("SHOW");
t=false;
}
else{
$('.show').show();
$(this).text("HIDE");
t=true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPY NEW YEAR!!!</div>
You also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statemant to button class directly because you hide your menu on any a tag inside any li.

How to keep next() function from hiding on hover?

I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/

My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle

You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle

Navigation dropdown toggle - mouseout as well as off hover?

Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!

Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});

jQuery on hover show sub links on Navigation Menu

I have a navigation menu, when i hover over the links i want to show each links sub menu then toggle or hide and show each individual one.
At the moment when I hover over the link on the navigation menu it displays all the sub menus for all the links.
I have attached a fiddle with a demo of my code so far: -
http://jsfiddle.net/QTm2c/1/
Here is the jQuery
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$("span.navmain__item--subnavholder").toggle();
})
})
Thanks

Use :
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$(this).children("span.navmain__item--subnavholder").toggle();
});
});
Fiddle

Try this:
$(document).ready(function() {
$("li.navmain__item a").hover(function () {
$(this).siblings().toggle();
})
})

You have to target the specific submenu. Inside the hover() handler, use:
$("span.navmain__item--subnavholder", this.parentElement).toggle();

You just have to get the subnavholder for the element you're hovering. In the callback, the element you're hovering over is stored in this (as an HTML Element).
Changing
$("span.navmain__item--subnavholder").toggle();
to
$(this).parent().find("span.navmain__item--subnavholder").toggle();
Will do the trick!

In your current setup this should do it
$(document).ready(function() {
$("li.navmain__item").hover(function () {
$(this).find(".navmain__item--subnavholder").toggle();
})
})

You could also add indexing to the script. Here is edited, working jssfiddle: http://jsfiddle.net/QTm2c/8/
$(document).ready(function() {
$("li.navmain__item a").hover(function () {
var index = $( "li.navmain__item a" ).index( this );
$("span.navmain__item--subnavholder"+index).toggle();
})
})

Responsive tabs to accordion issue

I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?

If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle