I got an error
Not Found: /menu.js.
I wanna embed jQuery into HTML,app(child app) is in testapp(parent app),and app has index.html&menu.js. index.html&menu.js is in templates folder which is in app.
index.html
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="./menu.js" ></script>
<body>
<div class="list-company_demand">
<ul class="menu demand-parent">
<li>
<a class="menu-item">A（a）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
<a class="menu-item">4</a>
</li>
</ul>
</li>
<li>
<a class="menu-item">A（b）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
<a class="menu-item">4</a>
<a class="menu-item">5</a>
</li>
</ul>
</li>
<li>
<a class="menu-item">A（c）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
<a class="menu-item">4</a>
</li>
</ul>
</li>
<li>
<a class="menu-item">A（d）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
menu.js
$(function() {
$('.menu-item').on('click', function() {
var child = $(this).next('.menu-child');
$('.list-menu').height(child.height());
child.addClass('is-active');
});
$('.menu-child').prepend('<li class="menu-back"><a>１つ戻る<i class="fa fa-chevron-left"></i></a></li>');
$('.menu-back').on('click', function() {
var parents = $(this).parent();
parents.removeClass('is-active');
$('.list-menu').height(parents.parent().parent().height());
});
});
I rewrote in this part into into but same error happens.What is wrong in my code?Am I wrong to use jQuery?How can I fix this?
By the way, by using Google validation, Failed to load resource: the server responded with a status of 404 (Not Found) menu.js error happens in Console.
Folder structure is
testapp (app name)
-app (child app)
-templates
-menu.js &index.html
menu.js &index.html is in same folder templates.
Your jquery file makes the error, replace it width https://code.jquery.com/jquery-2.2.4.min.js, have a look:
$(function() {
$('.menu-item').on('click', function() {
var child = $(this).next('.menu-child');
$('.list-menu').height(child.height());
child.addClass('is-active');
});
$('.menu-child').prepend('<li class="menu-back"><a>１つ戻る<i class="fa fa-chevron-left"></i></a></li>');
$('.menu-back').on('click', function() {
var parents = $(this).parent();
parents.removeClass('is-active');
$('.list-menu').height(parents.parent().parent().height());
});
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./menu.js" ></script>
</head>
<body>
<div class="list-company_demand">
<ul class="menu demand-parent">
<li>
<a class="menu-item">A（a）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
<a class="menu-item">4</a>
</li>
</ul>
</li>
<li>
<a class="menu-item">A（b）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
<a class="menu-item">4</a>
<a class="menu-item">5</a>
</li>
</ul>
</li>
<li>
<a class="menu-item">A（c）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
<a class="menu-item">4</a>
</li>
</ul>
</li>
<li>
<a class="menu-item">A（d）</a>
<ul class="menu-child">
<li>
<a class="menu-item">1</a>
<a class="menu-item">2</a>
<a class="menu-item">3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
I have a html code below, the jsfiddle link is https://jsfiddle.net/Debra321/b0d4Lupn/
<html>
<body>
<div class="side-collapse in" id="site-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" target="_self">
Home
</a>
</li>
<li class="dropdown dropdown-hover open">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Store <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a class="itemlistChange" data-url="/store/products" target="_self">
All Products
</a>
</li>
<li class="">
<a class="itemlistChange" data-url="/store/cart" target="_self">
My Cart
</a>
</li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/promotions">Promotions</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/patches">Patches</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/skincare">Skin Care</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/maintenancekits">Maintenance Kits</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/salestools">Sales Tools</a></li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Commissions <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/commissions" target="_self">
Commissions
</a>
</li>
<li class="">
<a href="/rank" target="_self">
Rank Advancement
</a>
</li>
<li class="">
<a href="/volumes" target="_self">
Volumes
</a>
</li>
<li class="">
<a href="/commissions/myearnings" target="_self">
Earnings
</a>
</li>
<li class="">
<a href="/commissions-earnings" target="_self">
Commissions Earnings
</a>
</li>
<li class="">
<a href="/commissions/incomestatement" target="_self">
Income Statement
</a>
</li>
<li class="">
<a href="/commissions/commissionspaycard" target="_self">
Commissions Pay Card
</a>
</li>
<li class="">
<a href="/volume-maturity-calendar" target="_self">
Volume Maturity Calendar
</a>
</li>
<li class="">
<a href="/carry-over-volume-calendar" target="_self">
Carry Over Volume Calendar
</a>
</li>
<li class="">
<a href="/commissions/matchingbonus" target="_self">
Bonus Qualification
</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Organization <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/app/enrollmentredirect" target="_blank">
<i class="fa-plus"></i>
Enroll new...
</a>
</li>
<li class="">
<a href="/prepopulatedcartlist" target="_self">
Pre Populated Cart Builder
</a>
</li>
<li class="">
<a href="/personally-enrolled-team" target="_self">
Personally Enrolled Team
</a>
</li>
<li class="">
<a href="/upcoming-promotions" target="_self">
Upcoming Rank Promotions
</a>
</li>
<li class="">
<a href="/new-distributors" target="_self">
New Distributors List
</a>
</li>
<li class="">
<a href="/recent-activity" target="_self">
Recent Activity List
</a>
</li>
<li class="">
<a href="/retail-customers" target="_self">
Retail Customers
</a>
</li>
<li class="">
<a href="/preferred-customers" target="_self">
Preferred Customers
</a>
</li>
<li class="">
<a href="/reps" target="_self">
Reps
</a>
</li>
<li class="">
<a href="/binary-tree-viewer" target="_self">
Binary Tree Viewer
</a>
</li>
<li class="">
<a href="/organization/enrollertreeviewer" target="_self">
Enroller Tree Viewer
</a>
</li>
</ul>
</li>
<li>
<a href="/events" target="_self">
Events
</a>
</li>
<li>
<a href="/AutoOrder" target="_self">
Monthly Subscription Orders
</a>
</li>
<li>
<a href="/orders" target="_self">
Orders
</a>
</li>
<li>
<a href="/resources/resourcelist" target="_self">
Resources
</a>
</li>
<li class="visible-xs">
<a href="/logout" target="_self">
Sign out
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
I expect to select Organization>Binary Tree Viewer, but cannot do that successfully. Since Organization is the direct 3rd child of the ul, I try to retrieve it by
document.querySelector('#site-navigation-navbar-collapse ul > li:nth-child(3)')
But what I got is always "Promotions" in "Store". How to select the Binary Tree Viewer by CSS selectors? Any suggestions are appreciated.
This is a simple example of what I have:
<div>
<ul>
<li>
<a href="">
<label>Example1 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example2 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example3 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example4 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example5 something I don't want</label>
</a>
</li>
</ul>
</div>
The structure of code I have is this one. This is generated automatically, so In this <div> some times there are more <li> tags(with it's content inside) or less depending on what data it gets from database.
What I want to do is with javascript and jquery get the list and cut the content of the labels from the word 'something' till the end of it so it does not appear.
The word is always de same (something), so what I want to do is read that word and cut it out with the rest of text it comes behind it.
The result should be this:
<div>
<ul>
<li>
<a href="">
<label>Example1</label>
</a>
</li>
<li>
<a href="">
<label>Example2</label>
</a>
</li>
<li>
<a href="">
<label>Example3</label>
</a>
</li>
<li>
<a href="">
<label>Example4</label>
</a>
</li>
<li>
<a href="">
<label>Example5</label>
</a>
</li>
</ul>
</div>
I hope I explained myself right.
If you have any questions ask me!
You can use substr():
var cutWord = 'something';
$('ul li').each(function(){
var text = $(this).find('label').text();
var newText = text.substr(0, text.indexOf(cutWord)).trim();
$(this).find('label').text(newText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>
<a href="">
<label>Example1 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example2 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example3 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example4 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example5 something I don't want</label>
</a>
</li>
</ul>
</div>
Since there is a space behind them you can split the string on space.
$('label').each(function(){
var splitted = $(this).text().split(" ");
$(this).text(splitted[0]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>
<a href="">
<label>Example1 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example2 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example3 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example4 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example5 something I don't want</label>
</a>
</li>
</ul>
</div>
Below I am looking through a list of swatches and assigning the title attribute to variable and then displaying this value below the swatch.
On mouseleave if the parent has selected class I return false so that the title attribute value is still shown. However if I mouseleave from swatch where parent does not have selected class the title attribute value becomes empty as shown in the code.
How do I modify so that on mouseleave if parent does not have selected class, it uses the title attribute value from the parent selected class?
$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
$(this).mouseenter(function(){
var swatchColor = $(this);
var swatchTitle = swatchColor.attr('title');
var swatchTitleInsert = swatchColor.closest('.carousel').next();
swatchTitleInsert.html(swatchTitle);
$(this).mouseleave(function(){
if($(this).parent().hasClass('selected')){
return false;
} else {
//I want to display title attr value from parent selected//
swatchTitleInsert.html('');
}
});
});
});
span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
I think this is your answer:
$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
var swatchColor = $(this);
var swatchTitle = swatchColor.attr('title');
var swatchTitleInsert = swatchColor.closest('.carousel').next();
$(this).mouseenter(function(){
swatchTitleInsert.html(swatchTitle);
$(this).mouseleave(function(){
if($(this).parent().hasClass('selected')){
return false;
} else {
var swatchTitle = $(this).closest('.producttile_swatches').find('.swatches ul li a.selected span.swatch_color').attr('title');
swatchTitleInsert.html(swatchTitle);
}
});
});
});
span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
I'm trying to implement a cascade check on a nested list with checkboxes.
I'm using this answer from ᾠῗᵲᄐᶌ as a guide.
I'm having trouble dealing with the check/uncheck of the parents of a given node. I can check all parents but uncheck only fist one and I can't figure out what I'm doing wrong.
HTML
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").prop("checked", function()
{
return $(this).parent("a").next("ul").find(":checked").length;
});
});
FIDDLE: https://jsfiddle.net/h8hzj01q/
The problem was that the statement $(this).parents("ul").prev("a").find("input:checkbox") traverses the dom from top to bottom, i.e. from topmost ul to the lowest. You need this in reverse, to make all the parent checkboxes unchecked. Reversing the jquery object obtained from $(this).parents("ul").prev("a").find("input:checkbox") and using each loop, the desired result is obtained.
The example that you included worked as it uses prev which traverses bottom to top, while you're using find that traverses from top to bottom
Changed your code to work like this:
jQuery.fn.reverse = [].reverse;
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").reverse().each(function(a, b) {
$(b).prop("checked", function()
{
return $(b).parent("a").next("ul").find(":checked").length;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
can anyone tell me why this funcion drop's me to the top of the page ?
any ideas how to solve this problem?
Or any suggestion's of a better code to use?
P.S. this is for ebay template, quite a big menu section.
<script type="text/javascript">
startList = function() {
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onclick=function() {
this.className = (this.className == "on") ? "off" : "on";
}
}
}
}
}
window.onload=startList;
</script>
I have a basic markup:
<ul id="nav">
<li>Home </li>
<li>About >
<ul>
<li>History </li>
<li>Team </li>
<li>Offices </li>
</ul>
</li>
<li>Services >
<ul>
<li>Web Design </li>
<li>Internet Marketing </li>
<li>Hosting </li>
<li>Domain Names </li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us >
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
Why don't you just simplify it? You could just try:
<li>Home </li>
and change your JS to:
function List(element)
{
element.parentNode.className = (element.parentNode.className == "on") ? "off" : "on";
}
That's much simpler.
EDIT: Or you just replace href="#" with href="javascript:return(false);". As # is a reference to an anchor which does not exist, it will take you to the top of the page.
Here i have done bin using jQuery:
1) Include latest jquery.js file in html header tag first.
2) HTML:
<ul id="nav">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About >
</a>
<ul>
<li>
<a href="#">
History
</a>
</li>
<li>
<a href="#">
Team
</a>
</li>
<li>
<a href="#">
Offices
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Services >
</a>
<ul>
<li>
<a href="#">
Web Design
</a>
</li>
<li>
<a href="#">
Internet Marketing
</a>
</li>
<li>
<a href="#">
Hosting
</a>
</li>
<li>
<a href="#">
Domain Names
</a>
</li>
<li>
<a href="#">
Broadband
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Contact Us >
</a>
<ul>
<li>
<a href="#">
United Kingdom
</a>
</li>
<li>
<a href="#">
France
</a>
</li>
<li>
<a href="#">
USA
</a>
</li>
<li>
<a href="#">
Australia
</a>
</li>
</ul>
</li>
</ul>
3) CSS Styles:
ul#nav{
background-color:#445566;
}
ul li{
list-style:none;
}
ul li ul{
background-color:#558888;
}
ul li a{
color:#fff;
text-decoration:none;
}
.off ul{
display:none;
}
.on ul{
display:block;
}
4) JQuery in Script Tag:
$(function() {
$("ul li ul").each(function() {
$(this).parent().addClass('off');
});
$("ul li").mouseenter(function() {
if ($(this).hasClass('off')) {
$(this).removeClass('off');
$(this).addClass('on');
}
});
$("ul li").mouseleave(function() {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
$(this).addClass('off');
}
});
});
Try it on bin : http://codebins.com/bin/4ldqpal