We Keep Coding

Clicking on sub menu not opening the page it is hiding the sub menu in HTML

Hi i have created a dropdown sidebar menu but the problem when i click on main menu it is displaying the sub menu correctly but the problem is when i click on sub menu it is not opening the link it is getting hided.Here is the code for that.
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<h2>Materno Platform</h2>
</div>
<ul class="sidebar-nav">
<li>Dashboard</li>
<li>Customers</li>
<li>providers</li>
<li>User Management</li>
<li>Plans</li>
<li class="has-ul">Order Fullfillment<i class="fa fa-plus"></i>
<ul class="sub-ul">
<li>Plan Purchases</li>
<li>Med Orders</li>
<li>Lab Orders</li>
<li>predictive Analytics</li>
</ul>
</li>
<li class="has-ul">Master Data Management<i class="fa fa-plus"></i>
<ul class="sub-ul">
<li>Care Plans</li>
</ul>
</li>
<li>Transcriptions</li>
<li>Profile</li>
</ul>
</aside>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#sidebar-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$('li.has-ul').click(function() {
$(this).children('.sub-ul').slideToggle(500);
$(this).toggleClass('active');
event.preventDefault();
});
Fiddle Link: https://jsfiddle.net/3yfdcto0/1/

Change Jquery
$('li.has-ul a').click(function() {
$(this).parent().find('.sub-ul').slideToggle(500);
$(this).parent().toggleClass('active');
/*event.preventDefault();*/
});
https://jsfiddle.net/lalji1051/kp8x4e7w/4/

I hope this will help you.
$('li.has-ul a').click(function() {
$(this).siblings('.sub-ul').slideToggle(500);
$(this).parent().toggleClass('active');
event.preventDefault();
});

Need to close dropdown click on click of body [duplicate]

This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 5 years ago.
I have my dropdown, it is working on click of its parent anchor tag, but now i want to close it on body click
I have try to do it with event.stopPropagation();
but it didn't work, here is my code -
$(".mydropd > a").click(function() {
$(this).siblings(".mycustom_dropd").slideToggle();
});
$('body').click(function(event) {
$(".mycustom_dropd").slideUp();
event.preventDefault();
event.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mydropd">
<a href="#" class="mydropd_a">menu
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
<ul class="mycustom_dropd">
<li>
<img src="images/vibgyor.png"> VIBGYOR
</li>
<li>MULTIPLAYER</li>
<li>RAPTOP</li>
<li>HELP</li>
<li>PROFILE</li>
</ul>

Wrap code in jQuery ready function.
<script type="text/javascript">
$(function() {
$(".mydropd > a").click(function(){
$(this).siblings(".mycustom_dropd").slideToggle();
event.preventDefault();
event.stopPropagation();
});
$('body').click(function(event){
$(".mycustom_dropd").slideUp();
});
});
</script>
<div class="mydropd">
<a href="#" class="mydropd_a">Click Here
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
<ul class="mycustom_dropd">
<li><img src="images/vibgyor.png"> VIBGYOR</li>
<li>MULTIPLAYER</li>
<li>RAPTOP</li>
<li>HELP</li>
<li>PROFILE</li>
</ul>
</div>

update sidebar main-menu and sub-menu class based on url

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
}
});
});

JavaScript Not Removing Class

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');
});

Close Bootstrap Menu when a Link is selected

I have a side menu that displays offcanvas. When you click the button, the canvas pushes left and opens the menu. I would like the menu to collapse and not remain open when a link is selected.
Here is the HTMl:
<header>
<nav class="menu" id="theMenu" ng-controller="MenuCtrl">
<div class="menu-wrap">
<a ng-href="/"><img src="/images/zj-logo.png" alt="Zach Janice" class="logo"></a>
<i class="fa fa-times menu-close"></i>
<a ng-href="/">Home</a>
<a ng-href="#/about">About</a>
<a ng-href="#/projects">Projects</a>
<a ng-href="#/services">Services</a>
<a ng-href="#/contact">Contact</a>
</div><!-- menu-wrap -->
<div id="menuToggle" class="active">
<i class="fa fa-bars"></i>
</div><!-- menuToggle -->
</nav>
</header>
jQuery:
(function(jQuery){
// Menu settings
jQuery('#menuToggle, .menu-close').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});
})(jQuery);
Any Help is greatly appreciated. Thanks in advance.
-Z

Since you're using toggleClass, you can just add .menu-wrap a to your selector which should toggle it off when clicked. The links won't be in view unless the classes are added, so you won't get any mis-clicks.
jQuery('#menuToggle, .menu-close', '.menu-wrap a').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});