onclick jquery add/remove class function not working - javascript

I'm using single navigation file for all web pages, so i need to add or remove class based on click function. but somehow it's not working fine. any help would be appreciated.
$(function() {
$("li").on("click", function() {
$("li.active").removeClass("active");
$(this).addClass("active");
});
});
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li style="cursor: pointer;" onclick="window.location='new-patient.php';">
<a><i class="fa fa-plus-square"></i>New Patient</a>
</li>
<li style="cursor: pointer;" onclick="window.location='returning-patient.php';">
<a><i class="fa fa-plus-square"></i>Returning Patient</a>
</li>
</ul>
</div>
</div>


$('#menu li a').on('click', function(){
$('#menu li a.current').removeClass('current');
$(this).addClass('current');
});
JSFiddle


You can use following script on every page to set this.
var pageName = (function () {
var a = window.location.href,
b = a.lastIndexOf("/");
return a.substr(b + 1);
} ());
$("#menu-content a").each(function () {
if ($(this).attr('href') == pageName) {
$(this).parents("li").addClass('active');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="new-patient.php">
<i class="fa fa-plus-square"></i>New Patient
</a>
</li>
<li>
<a href="returning-patient.php">
<i class="fa fa-plus-square"></i>Returning Patient
</a>
</li>
</ul>
</div>
</div>

Related

How to apply toggle for child elements

When I clicked the button, the whole side bar is toggling, but I need only the side menus to get toggle.
HTML part
<nav id="sidebar">
<div class="sidebar-header">
<img src="/fintantra/images/logo.jpg" style="margin-left:4px;">
<div class="btn-group">
.....
......
<ul class="list-unstyled components" id="demo">
<li>
<a href="#adminSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-user"></i>
FDR
</a>
<ul class="collapse list-unstyled" id="adminSubmenu">
<li>
<i class="fa fa-arrows-alt" aria-hidden="true"></i> FPO Profile
</li>
....
</ul>
</li>
<li>
<a href="#fisSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-user"></i>
FIS
</a>
<ul class="collapse list-unstyled" id="fisSubmenu">
<li>
<i class="fa fa-arrows-alt" aria-hidden="true"></i> FPO Profile
</li>
....
</ul>
</li>
...
</ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>KANCHI</span>
</button>
JS Part
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
The above code is working for the whole sidebar and when I replace ('#sidebar') with ('#demo') it is not toggling. I'm using demo as id in the menu ul section.

<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#demo').toggleClass('active');
});
});
</script>

<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#demo').toggle();
});
});
</script>

Select Closest href Match With jQuery?

trying to narrow down <a> hrefs to one with jQuery filter and then add the tag active class. I am doing this because I get redirected from sidebar submenu and want to still keep sidebar menu open.
$(document).ready(function () {
var url = window.location;
$('ul.treeview-menu a').filter(function () {
return url.indexOf(this.href) > -1;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">General</li>
<li class="home"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></li>
<li class="header">Data Managment</li>
<li class="treeview">
<a href="#">p <span>Tree</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>foo</li>
<li>bar</li>
<li>blah</li>
<li>blahh</li>
</ul>
</li>
<li class="treeview">
<a href="#"></i> <span>Tree 2</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>aaa</li>
...
</ul>
</li>
</ul>
then if I get redirected inside foo and href be like /p/pages/foo.php/new.php I still want to foo be active.
why don't this work?

Other way would be using each loop and then comparing if the url == this.href if yes then add class to that li and open closest ul.
Demo Code :
$(document).ready(function() {
//just for demo...
var url = 'https://stacksnippets.net/p/pages/bar.php';
$('ul.treeview-menu a').each(function() {
//if full url is not same with li use indexof else if http://...also there in href of a tag use below..
if (url == this.href) {
$(this).addClass('active') //add class active to `a`
$(this).closest("ul").slideDown(); //slide ul tag where `li` is active
}
})
})
.treeview-menu {
display: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">General</li>
<li class="home"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></li>
<li class="header">Data Managment</li>
<li class="treeview">
<a href="#">p <span>Tree</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>foo</li>
<li>bar</li>
<li>blah</li>
<li>blahh</li>
</ul>
</li>
<li class="treeview">
<a href="#"> <span>Tree 2</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li>aaa</li>
...
</ul>
</li>
</ul>
Updated Code :
$(window).on('load', function() {
var url = window.location.href;
var new_url = url.slice(url.lastIndexOf('/') + 1);
$('ul.treeview-menu a').each(function() {
var res = this.href.replace(".php", "");
var href = res + "/" + new_url;
if (href == url) {
$(this).parent().addClass('active') //add class active to `a
$(this).closest("ul").slideDown(); //slide ul tag where `li` is active
}
})
});

Add class to iframe inner body when parent body hasclass

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MARA-Web Accounting Solution</title>
<link href="font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lib/bootstrap/bootstrap.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/scripts.min.js" type="text/javascript"></script>
<script src="js/lib/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="js/lib/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/lib/tabdrop/bootstrap-tabdrop.js" type="text/javascript"></script>
<script type="text/javascript" src="js/lib/sparklines/jquery.sparkline.min.js"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>
<!-- <script language="javascript" type="text/javascript">
$(window).load(function () {
$("#divLoading").fadeOut("slow");
});
</script>-->
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body
{
font-family: 'Montserrat' , sans-serif !important;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.get("sessval.ashx", function (data) {
$("#partyval").text(data);
})
})
</script>
<script type="text/javascript">
$(document).ready(function () {
$("iframe>body").css("background-color", "white");
$("a").not('a#logout').click(function (e) {
e.preventDefault();
var hrf = $.trim($(this).attr("href"));
$(this).parent('li').siblings('li').removeClass('select');
$(this).parent('li').addClass('select');
if (hrf) {
try {
$("iframe.external").attr("src", hrf);
}
catch (ex) {
$get('ifrm').src = hrf;
}
}
});
$('ul.menu li:first').addClass('select');
});
$(document).ready(function () {
$('.clickloader').click(function () {
$.blockUI({ css: {
border: 'none',
padding: '15px',
// backgroundColor: '#000',
// '-webkit-border-radius': '10px',
// '-moz-border-radius': '10px',
opacity: .4,
color: '#fff'
}
});
setTimeout($.unblockUI, 1000);
});
});
function getValu() {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var qry = query.split("&")[0];
var parts = qry.split("=");
if (parts[0] == "usn") {
value = parts[1];
return value;
}
}
</script>
<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var aaa = $('body').hasClass("left-side-collapsed");
if (aaa == true) {
$("iframe").contents().find('body').addClass('foo');
}
$('.accordion-toggle').on('click', function (event) {
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.next('.accordion-content');
var accordionToggleIcon = $(this).children('.toggle-icon');
// toggle accordion link open class
accordion.toggleClass("open");
// toggle accordion content
accordionContent.slideToggle(250);
// change plus/minus icon
if (accordion.hasClass("open")) {
accordionToggleIcon.html("<i class='fa fa-minus-circle pull-right'></i>");
} else {
accordionToggleIcon.html("<i class='fa fa-plus-circle pull-right'></i>");
}
});
});
</script>
</head>
<body class="left-side-collapsed">
<div>
<header>
<nav class="navbar navbar-default navbar-transparent">
<div class="container" id="nav-container">
<div class="navbar-header">
<button class="navbar-toggle navbar-toggle-settings" data-target="#top-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<i class="ion ion-ios7-gear-outline"></i></button>
<a class="navbar-brand logo" href="javascript:;">
<img src="images/logo2.png" alt="logo" />
<Label id="complbl" runat="server" CssClass="compn" Height="22px"></Label>
<label ID="fnylbl" runat="server" class="finy" Height="22px"></Label>
</a>
<div class="navbar-side-menu-toggle">
<button class="toggle-btn" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
</div>
</div>
<div class="collapse navbar-collapse" id="top-navbar">
<nav id="primary_nav_wrap">
<ul>
<li class="menu-item"><a id="logout" href="startingPage.aspx" target="_self"><i class="fa fa-home"></i> Home
</a></li>
<li class="divde">|</li>
<!--<li class="menu-item"></i> Payment</li>
<li class="menu-item"></i> Receipt</li>-->
<li class="menu-item"></i> Transaction</li>
<li class="divde">|</li>
<!--<li class="menu-list "></i> <span> Contra</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<li >
</i> Cash To Bank</li>
<li >
</i> Bank To Cash</li>
<li >
</i> Bank To Bank</li>
</ul>
</li>-->
<!--<li class="menu-list "></i> <span>A/C Transaction</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<li>
<i class="fa fa-shopping-cart"></i> Purchase</li>
<li ></i> Sale
</li>
<li ><i class="fa fa-credit-card"></i> Debit Note
</li>
<li></i> Credit Note
</li>
<li></i> Import Purchase
</li>
</ul>
</li>-->
<li class="menu-list "></i> <span> General Setting</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<li >
</i> Group Ledger</li>
<li>
</i> General Ledger</li>
<li >
</i> Create Ledger</li>
<li >
</i> Modify Ledger</li>
<li>
</i> Customer</li>
<li>
</i> Supplier</li>
<li>
</i> Sales Person</li>
<li>
</i> SAC Code</li>
<li>
</i> HSN Code</li>
<li>
</i> Firm Signatory</li>
<!--<li>
</i> Currency</li>
<li>
</i> Currency Conversion</li>-->
<li>
</i> Lock Entries</li>
<li>
</i> Closing Stock</li>
<!--<li>
</i> Server Utility</li>-->
</ul>
</li>
<li class="divde">|</li>
<li class="menu-list "></i> <span>Base Setting</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<!--<li >
</i> Service Tax / Charge</li>
<li >
</i> ROE</li>
<li >
</i> New Agent / Vendor</li>
<li >
</i> TDS Base Details</li>
<li >
</i> Section Master</li>-->
<li >
</i> Invoice Setting</li>
<li >
</i> Voucher Setting</li>
<li >
</i> Cost Center</li>
<li>
</i> User List</li>
<li>
</i> Company Profile</li>
<li>
</i> Server Utility</li>
</ul>
</li>
</ul>
</nav>
<ul class="nav navbar-nav navbar-right">
<!--<li>
<a class="top_link1" href="../help_html/index.html" target="parent">Help</a> </li>-->
<li> <a class="top_link1" href="logoutform.aspx">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container" id="content-container">
<div class="content-wrapper">
<div class="row">
<div class="side-nav-content">
<div class="left-side-wrapper">
<div class="left-side sticky-left-side">
<div class="left-side-inner">
<ul class="nav nav-pills nav-stacked custom-nav">
<li class="menu-list "><a href="stock/rowmat.aspx"><i class="fa fa-line-chart"></i><span>
Stock (Inventory)</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-rupee"></i>Price Type</li>
<li><i class="fa fa-tags"></i>Department & Brand</li>
<li><i class="fa fa-tags"></i>Item Master</li>
<li><i class="fa fa-shopping-cart"></i>Item Purchase</li>
<li><i class="fa fa-shopping-cart"></i>Item Sale
</li>
<li><i class="fa fa-shopping-cart"></i>Debit Note
</li>
<li><a href="finance/batchsret.aspx"><i class="fa fa-shopping-cart"></i>Credit Note
</a></li>
<!--<li></i> Sale(Others)
</li>-->
<!--<li></i> Debit Note(Others)
</li>
-->
<li><i class="fa fa-bar-chart"></i>Stock Ledger
</li>
<!--<li></i> Weighted Average </li>
<li></i> FIFO Method</li>-->
<li><i class="fa fa-line-chart"></i>Stock Report</li>
<li><i class="fa fa-area-chart"></i>Sale Report</li>
<li><i class="fa fa-balance-scale"></i>Measurement Unit</li>
</ul>
</li>
<li class="menu-list"><a href="track_reports/updateTranAcHead.aspx"><i class="fa fa-user-o"
aria-hidden="true"></i><span>A/C Reports</span> <i class="fa fa-angle-down pull-right">
</i></a>
<ul class="sub-menu-list">
<li><a href="track_reports/updateTranAcHead.aspx"><i class="fa fa-file-text-o"></i>Alter
Entries</a></li>
<li><a href="track_reports/updateTranAcHead.aspx?id=Trial Balance"><i class="fa fa-file-text-o">
</i>Trial Balance</a></li>
<li><a href="track_reports/updateTranAcHead.aspx?id=Vr Balance Sheet"><i class="fa fa-file-text-o">
</i>Balance Sheet</a></li>
<li><a href="track_reports/updateTranAcHead.aspx?id=Vr PL Sheet"><i class="fa fa-money">
</i>Profit and Loss</a></li>
<li><i class="fa fa-book"></i>Subd. Book</li>
<li><i class="fa fa-file-text-o"></i>Ledger View</li>
<li><i class="fa fa-print"></i>Ledger Print</li>
<li><a href="track_reports/CustStatement.aspx"><i class="fa fa-file-text-o"></i>Customer
Statement</a></li>
</ul>
</li>
<li class="menu-list "><a href="track_reports/ServiceTaxD.aspx"><i class="fa fa-file-text-o">
</i><span>Other Reports</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-file-text-o"></i>B/L Sheet</li>
<li><i class="fa fa-file-text-o"></i>P/L Statement</li>
<!--<li >
</i> Service Tax Report</li>
<li >
</i> Daily Sale Report</li>-->
<!--<li>
<i class="fa fa-file-text-o"></i> TDS Report</li>-->
<li><i class="fa fa-file-text-o"></i>Debtor Aging</li>
<li><i class="fa fa-money"></i>Cash Flow</li>
<!--<li>
</i> Dvat</li>
<li>
</i> Dvat Sale</li>
</ul>
</li>-->
<li><a href="track_reports/bankrecon.aspx"><i class="fa fa-bank"></i>
Bank Reconciliation</a></li>
<li><a href="finance/brconsole.aspx"><i class="fa fa-file-o"></i><span>
HO/Br Reconcile</span> </a></li>
<li><a href="track_reports/ConsoleR.aspx"><i class="fa fa-file-o">
</i>Consolidation</a> </li>
<li><a href="track_reports/shorting.aspx"><i class="fa fa-file-text-o">
</i>Query Reporting</a> </li>
<li><a href="finance/LedgerMerge.aspx"><i class="fa fa-file-o"></i>
Merge Ledger</a> </li>
<li><a href="GST/SupplierCnsltedrept.aspx"><i class="fa fa-file-powerpoint-o">
</i>Purchase Report</a> </li>
<li><a href="GST/SupplierCnsltedreptSale.aspx"><i class="fa fa-wpforms">
</i>Sales Report</a> </li>
</ul>
</li>
<!--GST MENU -->
<li class="menu-list "><a href=""><i class="fa fa-wpforms"></i><span>GST Forms</span>
<i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-file-text-o"></i>GSTR-1</li>
<li><i class="fa fa-file-text-o"></i>GSTR-2</li>
<li><i class="fa fa-file-text-o"></i>GSTR-3</li>
<!--GST MENU END -->
</ul>
</li>
<li class="menu-list "><a href=""><i class="fa fa-folder-o"></i><span>General Invoice</span>
<i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-file-text-o"></i>General Purchase</li>
<li><i class="fa fa-file-text-o"></i>General Sale</li>
<!--GST MENU END -->
</ul>
</li>
<li class="menu-list "><a href=""><i class="fa fa-upload"></i><span>Bulk Upload</span>
<i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-paypal"></i>General Ledger</li>
<li><i class="fa fa-paypal"></i>Transaction</li>
<!--<li >
</i> rent</li>-->
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-content-wrapper">
<iframe name="contentframe" src="mainpage.aspx" class="external left-side-collapsed" scrolling="yes"
width="99.8%" height="600px" style="background-color: #FFFFFF; border: none;"
id="Iframe1"></iframe>
</div>
</div>
</div>
</div>
</div>
<!--<div id='divLoading' style="position:absolute;top:30%;left:40%" >
<div class="loading" align="center" id="divImageLoader">
<img src="images/ajax-loader2.gif" alt="Loading..."/> Loading
</div></div>-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 pull-left">
<ul class="list-inline">
<li>
<strong>
<span id="partyval"></span></strong>
</li>
<li><asp:Label ID="dblbl" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label></li>
</ul>
</div>
<div class="col-md-6 pull-right">
<ul class="list-inline" style="text-align:right">
<li><Bold> Powered by Maco Infotech. Ltd. </Bold></li>
<li><asp:Label ID="dblbl" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
I want to add class on iframe inner body a class when my parent body hasClass left-side-collapsed I and try this code but it is not work for me any solution please comment. i have paste the code here you can check the code it is .net file .aspx any solution please comment. ------------------------------------
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

As long as the iframe is loaded this should work...
$("iframe").contents().find('body').addClass('foo');
...maybe go the other way around?
in mainpage.aspx:
$(document).ready(function () {
var p = parent;
if(p.$('body').hasClass('left-side-collapsed')){
$('body').addClass('foo');
}
});

Can you try:
var iframe = document.getElementById("myiframe");
var iframe_doc = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;
You should now be able to find the body on iframe_doc. Jquery might be easier to write - $(iframe_doc).find('body') - and then you can add the class.
See these answers for additional reference:
How can I access iframe elements with Javascript?
How do I add a class to a given element?

How to add active class only on second level of the navigation

I have an vertical navigation with two levels.
What I want is when I press the main li to add active and open class just to the main li and when I press on the sub-menu I want to add active just to that li. Here is my code:
HTML
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active">
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
JS
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu li").on("click", function() {
$(".page-sidebar-menu li").removeClass("active open");
$(this).addClass("active open");
});

You have to target the closest li inside class .page-sidebar-menu
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu > li").on("click", function() {
$(".page-sidebar-menu > li").removeClass("active open");
$(this).addClass("active open");
});

i'm not sure if i understood exactly what you asked.
But, from what i get i remade your html a bit (added a menu class to bind the click event more precisely)
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="menu start active open"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active"> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li class="menu"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
And so my version of your jQuery looks like that :
$(document).ready(function () {
// added a menu class to bind the click event more precisely
$(".menu > a").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
// and close the other menus
$(".menu").removeClass("open");
$(this).parent().addClass("active open");
});
$(".sub-menu li").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
$(this).addClass("active");
});
});
The CSS i used to test it was just this :
.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }
For an example, go check that jsfiddle that i made to answer you (really basic css here) and tell me if that's what you asked for.

mmenu doesnt fire onclick event

I am using the mmenu jquery plugin (http://mmenu.frebsite.nl/).
When clicking on items on the menu it doesnt trigger my onclick event. Any ideas why this could be happening would be much appreciated.
<nav id="menu">
<ul>
<li>
<span id="showScanDataBtn">
<i class="menu-icon fa fa-leaf"></i> Scan Data
</span>
</li>
<li>
<span id="showPickingBtn">
<i class="menu-icon fa fa-list"></i> View Picking
</span>
</li>
<li>
<span id="logoutBtn">
<i class="menu-icon fa fa-power-off"></i> Logout
</span>
</li>
</ul>
</nav>
This is the javascript:
$(function () {
$("#showPickingBtn").click(function (e) {
alert("Button Clicked!");
});
});
I have also tried the exact same but with a tags instead just in case the span was causing the issue, but im having the same effect.

How about this?
$("#showPickingBtn").on("click", function (e) {
alert("Button Clicked!");
});

try with ...on('click', function...
$(function () {
$("#showPickingBtn").on('click', function (e) {
alert("Button Clicked!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>
<span id="showScanDataBtn">
<i class="menu-icon fa fa-leaf"></i> Scan Data
</span>
</li>
<li>
<span id="showPickingBtn">
<i class="menu-icon fa fa-list"></i> View Picking
</span>
</li>
<li>
<span id="logoutBtn">
<i class="menu-icon fa fa-power-off"></i> Logout
</span>
</li>
</ul>
</nav>
Maybe you can use this as example so you just have to set the onclick event once and then inside check for id and do whatever you want with it...
$(function () {
$("#menu").find('li span').on('click', function (e) {
if( $(this).attr('id') === 'showPickingBtn' ) {
alert('CRAZY - ' + 'showPickingBtn' + ' has been clicked');
} else {
alert($(this).attr('id') + ' has been clicked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>
<span id="showScanDataBtn">
<i class="menu-icon fa fa-leaf"></i> Scan Data
</span>
</li>
<li>
<span id="showPickingBtn">
<i class="menu-icon fa fa-list"></i> View Picking
</span>
</li>
<li>
<span id="logoutBtn">
<i class="menu-icon fa fa-power-off"></i> Logout
</span>
</li>
</ul>
</nav>

this code working for me
$(document).ready(function() {
$("#showPickingBtn").click(function (e) {
alert("Button Clicked!");
});
});

Categories