We Keep Coding

ToggleClass and SlideToggle with Class Selector

I have a problem regarding the class selector. I have this hamburger menu that is only shown in certain window size (small). In order to show/hide the hidden menu, you need to click the hamburger menu itself. Those menu hidden have submenus as well and can be shown by clicking the dropdown button.
Then here's my problem, when the window gets resized, the list hidden from the hamburger menu must be hidden, as well as the submenus. However, those lines of codes that were meant to close the hamburger menu (toggleClass and slideToggle as shown) only works when you manually click the close button, but not in resizing. I've investigated and found out that $subMenu didn't point to element that has sub-menu-open class, therefore the toggleClass and slideToggle didn't work. This is not the case for manually clicking the close button of hamburger menu (also calls closeNav function). In both scenario, if $('#nav-main ul').find('li').hasClass('sub-menu-open') is true so the slideToggle and toggleClass are the only items who aren't working.
I hope you can help me.
Jquery
$subMenu = $('#nav-main ul').find('.sub-menu-open')
openNav = () ->
# Insert stuff here
$container.toggleClass('menu-open', true)
if $(window).width() > collapseWidth and ! $('body').hasClass('landing-page')
$menuCollapsed.stop(true, true).slideDown()
else
$navigation.stop(true, true).slideDown()
# Close navigation on window resize
$(window).on('resize', closeNav)
return
closeNav = () ->
# Insert stuff here
$container.toggleClass('menu-open', false)
# Hide menus
if $(window).width() > collapseWidth and ! $('body').hasClass('landing-page')
$menuCollapsed.stop(true, true).slideUp()
else
$navigation.stop(true, true).slideUp()
if $('#nav-main ul').find('li').hasClass('sub-menu-open')
$subMenu.toggleClass('sub-menu-open')
$subMenu.find('.sub-menu').stop(true, true).slideToggle()
HTML ELEMENTS
<nav class="nav-main" id="nav-main" style="display: block;">
<ul class="menu">
<li class="menu-item menu-item-icon">Library</li>
<li class="menu-item menu-item-icon">Store</li>
<li id="menu-classroom" class="menu-item menu-item-icon sub-menu-open">
<i class="icon-classroom"></i> Classroom
<ul class="sub-menu" style="display: block;">
<li class="menu-item menu-item-icon">Feedback</li>
<li class="menu-item menu-item-icon">Setup</li>
<li class="menu-item menu-item-icon">Mandatory assessments</li>
</ul>
</li>
</ul>
</nav>

jquery active menu lost after clicking on link

So I have a simple menu and I'm trying to remove/add an active class to the clicked menu item.
$(function(){
$('ul.navbar-nav li').click(function(){
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
});
});
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
<li>methods</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
The issue I'm having is this works but since going to a new page refreshes the site once I'm in the new page the active class always goes back to the initial active class in my HTML. I feel like I've done this a number of times and never had this issue. Maybe I'm missing something.

As you redirecting new page on each link click, so dynamically added active class is removed on page load. You can do it like following.
Remove the active class from home menu and add specific href to this like below.
<li class="active">Home</li>
jQuery
$(function () {
$('ul.navbar-nav > li > a').each(function () {
if (window.location.pathname.indexOf($(this).attr('href')) > -1) {
$(this).closest('li').addClass('active');
return false;
}
});
});

There is more than just one file in your project, right?
I would copy the whole ul navbar and paste it into every single page. All you have to do after that, is to put the active class on the respective li element.

Update: None of your li's should have an active class and then add the active class on page load.
/menu.html
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="work">work</li>
<li class="methods">methods</li>
<li class="blog">blog</li>
<li class="team">team</li>
<li class="contact">contact</li>
</ul>
js could be something like this
var page = window.location.pathname.split('/')[1];
$('li.' + page).addClass('active');

You can try following things
$(function()
{
$('ul.navbar-nav li').click(function(event)
{
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
Prevent default would avoid anchor tag tag default action to reload the page. So this should work.
Or if you do not need to go to another page then you can use div instead anchor tag.You can simulate anchor tag behaviour using :hover css selector.
div:hover
{
color:blue;
cursor:pointer;
font-style:underline;
}

This seems to be working:
HTML:
<ul class="nav navbar-nav">
<li id="liHome">home</li>
<li id="liWork">work</li>
<li id="liMethods">methods</li>
<li id="liBlog">blog</li>
<li id="liTeam">team</li>
<li id="liContact">contact</li>
</ul>
The event handler:
$('ul.navbar-nav li').click(function(){
window.sessionStorage.activeMenuItem = this.id;
});
When the page has loaded:
if (window.sessionStorage.activeMenuItem) {
$("#"+sessionStorage.activeMenuItem).addClass('active');
}
From https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage:
A page session lasts for as long as the browser is open and survives over page reloads and restores.
One problem with this solution is that you cannot open links in a new window, since:
Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

You're likely in one of three scenarios:
A) You have a collection of static HTML pages with unique content.
B) You're using a server-side language and doing some basic includes
C) You're using a framework with routing logic.
A If you have two pages both containing the menu code, then it's as simple as moving the default active class.
<!-- Home -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
…
</ul>
<!-- Work -->
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">work</li>
…
</ul>
B Assuming you're using PHP then something like the following is an easy way to pass this info around:
// menu.php
<ul class="nav navbar-nav">
<li <?php if($page = 'home'){ echo 'class="active"' } ?>>Home</li>
…
</ul>
// home.php
<?php
$page = 'home';
include(menu.php);
…
C This will largely depend on the framework you're using, but most will have template helpers that can access the current route, something like:
<ul class="nav navbar-nav">
<li <% is_route('home') class="active" %>>Home</li>
But adding classes after DOM load with javascript or using session or cookie states is likely over the top.

Change CSS of cursor with jQuery

I'm trying to change the CSS of the cursor to default on a a href link of # on the menu-item-4082 "About" link below. And I don't know why this seemingly simple function doesn't want to work.
Must be something simple I'm not seeing. Is my CSS selector correct?
Or is there a different or better way to change the CSS with jQuery? What about removing the href="#" as well?
Fiddle: http://jsfiddle.net/2nbad1gc/
Function:
$("li#menu-item-4082 .not-click").css("cursor","default");
HTML
<ul id="menu-main-menu-bar">
<li id="menu-item-217" class="menu-item">
Home
</li>
<li id="menu-item-4082" class="menu-item menu-item-type-custom
menu-item-object-custom menu-item-has-children menu-item-4082
has-dropdown not-click">
About
</li>
<ul class="dropdown">
<li id="menu-item-158" class="menu-item menu-item-158">
Values
</li>
<li id="menu-item-4083" class="menu-item menu-item-4083">
Why
</li>
</ul>

Is my CSS selector correct?
No, it's incorrect. It should be:
$("li#menu-item-4082.not-click a").css("cursor","default");
You were trying to select the child of li#menu-item-4082 whose class is not-click. When in fact, the li itself had the class .not-click.
Remove the space between $("li#menu-item-4082 .not-click").
As a side note, I'd suggest adding a class rather than adding inline CSS.
$("li#menu-item-4082.not-click a").addClass('default-cursor');
.default-cursor {
cursor: default;
}
.. you could also remove the href attribute completely:
$("li#menu-item-4082.not-click a").removeAttr('href');
If you wanted to avoid jQuery completely, you could also remove the href attribute using plain JS:
Single element:
document.querySelector('#menu-main-menu-bar .not-click a').removeAttribute('href');
Multiple elements:
var anchors = document.querySelectorAll('#menu-main-menu-bar .not-click a');
Array.prototype.forEach.call(anchors, function (el, i) {
el.removeAttribute('href');
});
or you could avoid JS and just use CSS:
li#menu-item-4082.not-click a {
cursor: default;
}

Just use simple css
.not-click a{
cursor: default;
}
http://jsfiddle.net/2nbad1gc/14/

Your selector needs to be modified to
$('li#menu-item-4082.not-click a').css("cursor", "default");
Usually it is recommended to add a class to the HTML element that sets cursor to default rather than directly change the CSS with jQuery like this.

Click event on jQuery "fly out" menu

I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit

If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.

$('.listTab a').click(function(e){...});

One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output

jquery menu - active links

I am trying to make a jquery menu that when I click on one of the links (with reloading the page), it changes its class to "active" and removes this class when I click on another link.
here is my code :
enter code here`$(document).ready(function(){
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
});
<ul id="mainMenu">
<li class="hover-width1">STRONA GŁÓWNA</li>
<li class="hover-width3">OFERTA</li>
<li class="hover-width3">CENNIK</li>
<li class="hover-width2">PRZEPISY</li>
<li class="hover-width2">GALERIA</li>
<li class="hover-width1">NASI KLIENCI</li>
<li class="hover-width2">NARZĘDZIA</li>
<li class="hover-width1">CIEKAWOSTKI</li>
<li class="hover-width2">KONTAKT</li>
</ul>
Can someone tell me why my code is not working when I reload the page:(

You can use $(document).ready(function(){ or $(function(){ to init jquery code, but not both at the same time.
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
The code should work fine, and when you reload the page the markup changes won't stay up, so you must make use of the uri / cookies to determine what item to show active.