We Keep Coding

Using JQuery to open close menu

ok so I have this script that controls an open/close of menu ....
of the three major functions (seen below) the first two work well in that the button-toggle changes its class (to an X) "active" which makes it an X.
However the fourth (commented out )function doesn't work... This was designed so that when you click on the body or anywhere other than the menu when it is open , it will close. please can someone help me to rewrite the last function so that it works.
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
/*$('body').on('click', function(e){
if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});*/
});
I have provided a JSFiddle below (The menu is set to full colapse on startup not open as in the demo fyi)
http://jsfiddle.net/greggy_coding/ppX53/66/

Use e.target instead of this, as this refers body and not current clicked element.
event.target
The DOM element that initiated the event.
$('body').on('click', function (e) {
if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});
Updated Fiddle

Here is the modified javascript that would work:
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function (e) {
e.stopPropagation();
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
$('#menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
});
});
Here is the forked working jsfiddle:
http://jsfiddle.net/ytnLyqrv/1/

How to rotate a bullet image in toggled unordered list with jQuery

Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});

All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});

$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it

distinguishing between PJAX Events

My pjax is working fine, but I need to do different things on different pjax events. Here is my pjax:
//MainMenu
$(document).pjax('.menu li a', '.pjax_submenu', { fragment: '.pjax_submenu', timeout: 5000});
//SubMenu
$(document).pjax('.submenu li a', '.submenu', { fragment: '.submenu', timeout: 5000 });
Basicly I have these two menues and want to do stuff on pjax:start and pjax:end. Unfortunatly these events are always called. e.g.:
$("body").on("pjax_event", ".pjax_submenu", function(e, category){
$(document).on('pjax:start', function() {
if(category === 1){
$('.pjax_submenu').fadeOut(500);
} else{
$('.info').slideUp(500);
}
});
$(document).on('pjax:end', function() {
if(category === 1){
$('.pjax_submenu').hide().fadeIn(500);
} else{
$('.info').hide().slideDown(500);
}
});
});
$("body").on("click", ".menu li a", function() {
$(".pjax_submenu").trigger("pjax_event", 1);
});
$("body").on("click", ".submenu li a", function() {
$(".pjax_submenu").trigger("pjax_event", 2);
});
It doesn't matter if I click on a menu or a sub menu link, the result is the execution of all pjax code.
Even if I do it like this:
$("body").on("click", ".menu li a", function() {
$(document).on('pjax:start', function() { stuff }
$(document).on('pjax:end', function() { stuff }
});
$("body").on("click", ".submenu li a", function() {
$(document).on('pjax:start', function() { stuff }
$(document).on('pjax:end', function() { stuff }
});
It still executes >both< and I can't seem to get my head around a method to distinguish the pjax events on different clicked items.
What I want to do is fade content on a main menu point and use slideUp/Down for the sub menu info boxes.
Tell me if you need any additional information, every help is appreciated!

I wanted to share my solution, it's not too pretty - but it works marvelous! Also it's the only solution I found...
You will need the pjax version that's readable!
Search pjax.js for "pjax:end". Add the paragrpah below:
fire('pjax:end', [xhr, options])
if(options.menu == 'main'){
fire('pjax:main:end', [xhr, options])
}else if(options.menu == 'sub'){
fire('pjax:sub:end', [xhr, options])
}
same for pjax:start!
You can then declare your pjax links with:
//MainMenu
$(document).pjax('.menu li a', '.pjax_submenu', {menu: 'main',fragment:'.pjax_submenu', timeout: 5000});
//SubMenu
$(document).pjax('.submenu li a', '.submenu', { menu: 'sub',fragment: '.submenu', timeout: 5000 });
and voilà you have the separate events:
//... for Main Menu
$(document).on('pjax:main:start', function() {
console.log('pjax:main:start');
});
$(document).on('pjax:main:end', function() {
console.log('pjax:main:end');
});
//... for Sub Menu
$(document).on('pjax:sub:start', function() {
console.log('pjax:sub:start');
});
$(document).on('pjax:sub:end', function() {
console.log('pjax:sub:end');
$('.info') .slideDown(500);
});
Hope this helps someone in the future!
Cheers!

jQuery : how to prevent animation in related div?

is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/

Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});

Menu stop second function from firing off upon other element using same function

I have 3 menus that use this .toggle and when I switch between menus it requires a second click for the menu to click on again.
How do I make the second function stop if another menu is shown?
$(".dd").toggle(function() {
$("ul a", this).click(function(e) {
e.stopPropagation();
});
$(".contextMenu").hide();
$("ul", this).show();
},
function() {
$("ul", this).hide();
}
);

I got this to work how I wanted it. Thanks to this thread jQuery Toggle State
$(".dd").click(function() {
$("ul", ".dd").not(this).hide();
$("ul", this).toggle();
});
$(".wrapper").click(function() {
$("ul", ".dd").hide();
});

I think instead of a .toggle() you want just a .click() here, like this:
$(".dd ul a", this).click(function(e) {
e.stopPropagation();
});
$(".dd").click(function() {
$(".contextMenu").hide();
$(this).find("ul").toggle();
//possibly to hide others: $(".dd").not(this).find("ul").hide();
});