I am working on a JavaScript class so when link is clicked that has a class of parent it will remove it and then add a class of .open
I have got addClass working but is not removing parent class when click on.
And when clicked closed should remove class open and revert it back to parent.
JavaScript Code
<script type="text/javascript">
$('.parent').on('click', function() {
$('.parent').addClass('.open').removeClass('.parent');
});
</script>
HTML Code
<div class="site-container">
<header id="header">
</header>
<div id="column_left" class="active">
<nav id="menu">
<ul class="nav">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li><a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> <span>System</span></a>
<ul id="setting" class="nav collapse">
<li><a data-toggle="collapse" data-target="#user">Users</a>
<ul id="user" class="nav collapse">
<li>Users</li>
<li>User Group</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="page-container">
<div class="container-fluid">
<div class="page-header">
<h1>Dashboard <small>Dashboard Stats</small></h1>
</div>
</div>
</div>
</div>
The whole idea is to toggle classes "parent" and "open" on link click.
Because of dynamical element classes it should be $(static_selector).on('click', '.parent,.open'.
JSFiddle example.
$(document).ready(function()
{
$(document).on('click', '.parent,.open', function()
{
$(this).toggleClass("parent open");
});
});
try something like this
<script type="text/javascript">
$('.parent').on('click', function() {
$(this).addClass('open').removeClass('parent');
});
</script>
You shouldn't add the period in addClass() and removeClass():
Replace:
$('.parent').addClass('.open').removeClass('.parent');
With:
$('.parent').addClass('open').removeClass('parent');
Also, it's more efficient to use $(this) instead of $('.parent') in the event listener, since this is the target of the click event. jQuery won't have to look for .parent, then.
No need to apply . as class when you add or remove class, check here
$('.parent').on('click', function() {
$('.parent').addClass('open').removeClass('parent');
});
Related
I am creating a navigation bar that allows a user to view a dropdown after hovering or clicking a link. Each link has a class called "nav_item". There is more than 1 dropdown menu; each one has a class called "dropdown". After hovering over "nav_item" the child element with a class called "dropdown" should be set to "display: block;".
Here's my nav bar code:
<nav>
<div id="nav_title">
Learn Web Design
</div>
<div class="nav_item">
Intro
</div>
<div class="nav_item">
Learn
<ul class="dropdown">
<li>
HTML
</li>
<li>
CSS
</li>
</ul>
</div>
<div class="nav_item">
About
<ul class="dropdown">
<li>
FAQ
</li>
<li>
The Author
</li>
</ul>
</div>
<div class="nav_item">
Support
</div>
<div class="nav_item">
Contact
</div>
</nav>
Here's the jQuery code that is obviously syntactically incorrect:
$(".nav_item").click(function() {
$(this.".dropdown").css("display", "block");
});
There's another method that is clearly incorrect in CSS:
.nav_item:hover {
this.dropdown {
display: block;
}
}
Try this:
$(".nav_item").click(function() {
$(this).find(".dropdown").css("display", "block");
});
To do something similar using hover:
$(".nav_item").hover(
function(){ $(this).find('.dropdown').css('display', 'block'); },
function(){ $(this).find('.dropdown').css('display', 'none'); }
);
I am struggling with below code. All I want to do is have the slide out menu( nav-container) open on page load, as at the moment its hidden until you open it with a click. How can I achieve this?
$(window).load(function() {
$(".btn-nav").on("click tap", function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
<nav class="nav-container hidden hideNav">
<ul class="nav-list">
<li class="list-item"><i class="fa fa-home"></i></li>
<li class="list-item"><i class="fa fa-credit-card-alt"></i></li>
<li class="list-item"><i class="fa fa-usb"></i></li>
<li class="list-item"><i class="fa fa-edge"></i></li>
<li class="list-item"><i class="fa fa-shopping-basket"></i></li>
</ul>
</nav>
call click:-
$(window).load(function() {
$(".btn-nav").on("click tap", function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
}).click();
});
Option 1: Fire the click event (as mentioned in a previous answer)
Option 2: Remove the click event
$(window).load(function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
});
I have this code for a sidebar (similar to WordPress).
I have multiple Parent classes <li class="panel parent">. One of the parent has a child container with Notes Received, and Notes Sent. Currently when I click the parent the child is working, and if I select other parents the child is closing as well.
I have used the addClass in jQuery to select both parent and child.
The Issue is
When I reload the page, addClass disappeared from the parent. I believe you can make it work with localStorage but i don't know how to use it.
Can you help me out. Sorry for my English.
<div id="sidebar-wrapper">
<div id="sidebar">
<ul id="accordion" class="sidebar-menu grandparent">
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#notes" href="#"> Vegetables </a>
<div id="notes" class="panel-collapse collapse">
<!-- children -->
<ul class="children">
<li> Potato </li>
<li> Tomato </li>
...
</ul>
</div>
</li>
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Fruits</a>
<div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
</li>
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Spices</a>
<div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
</li>
...
</ul>
</div
</div>
Here's my jQuery
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
});
Thanks.
OLD ANSWER
you should exec this
window.localStorage.setItem('OPEN', 'YES');
or this
window.localStorage.setItem('OPEN', 'YES');
depending if you are going to show or close the side menu.
Then your jQuery should become like this
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
if( window.localStorage.getItem('OPEN') ==='YES' ) {
/* put here your code to add the class "addClass" to the parents you want */
}
});
EDIT: NEW ANSWER BASED ON JSFIDDLE
this javascript code will do the magic
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
window.localStorage.setItem('OPEN', $(this).html());
alert("set OPEN to "+$(this).html());
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
if( window.localStorage.getItem('OPEN') ) {
$('.grandparent').find('li a').each(function( index ) {
if($(this).html() === window.localStorage.getItem('OPEN'))
$(this).click();
});
}
});
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});
how to add javascript function to a class of active ??
I do not understand completely about javascript.
if i click menu its like remove and add new class nav active.
<div id="sidebar">
<ul id="mainNav">
<li id="navDashboard" class="nav active">
<span class="icon-home"></span>
Beranda
</li>
<li id="navPages" class="nav">
<span class="icon-document-alt-stroke"></span>
Data Profil
<ul class="subNav">
<li>Peta Lokasi</li>
<li>Site Plan</li>
</ul>
</li>
You can use something like this:
$(selector).click(function(){
$(this).removeClass(your class)
.addClass('active');
});
You have to define the selector you want to do something.