Develop Reference

jquery problem how to perform the function when button will clicked?

enter image description here
html code
<nav class="nav-menu d-none d-lg-block" >
<ul>
#foreach($get_section as $section)
<li class="drop-down">{{$section['name']}}
<ul>
#foreach($section['categories'] as $category)
<li class="#if(!empty($category['sub_category']))drop-down #endif">{{$category['category_name']}}
<ul>
#foreach($category['sub_category'] as $sub_cate)
<li>
{{$sub_cate['category_name']}}
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
</li>
#endforeach
<li id="navbar"> admin Login </li>
{{--<li id="navbar"> <i class="flaticon-padlock"> </i> customer Login </li>--}}
</ul>
</nav>
javascript code
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none' //mobile nav class
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
As shown in the image (mobile version) when the user clicks the admin login button then cross button at the top also clicked simultaneously
so, what should I change in my code to get this functionality

how to detect click outside of push menu and close menu

I'm using javascript to open a push menu.But, I'd like to add the feature that if the mouse clicks outside of the push menu, it will close the menu. I've never coded this before so really unsure of where to begin.
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>

Add event to trigger click operation and follow if it contains your menu or not.
I am giving an example, I hope it will help you with solving your issue. 
html
<nav class="pushmenu pushmenu-left" id='menuBar'>
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>
Javascript
window.addEventListener('click', function(e){
if (document.getElementById('menuBar').contains(e.target)){
console.log('clicked inside');
// toggle your menu according to your requirements
} else{
// toggle your menu according to your requirements
console.log('clicked outside');
}
});

Use this Jquery
$(document).click(function () {
//Write your code here
});
it means when you are clicked outside that part your respective code will run

Try this. I added an initial style to hide menu. You can then display the menu using the menu button or clicking on the document.
$(document).ready(function() {
$('#menu').click(function() {
if($('nav').is(':visible')) {
hideMenu();
}
else {
$('nav').show(function() {
$(this).animate({left:'0'});
$('#menu').html('hide menu');
});
}
});
$(document).click(function(e) {
if(!$(e.target).closest('#menu').length && $('nav').is(':visible')) {
hideMenu();
}
});
});
function hideMenu() {
$('nav').animate({left:'-100px'}, function() {
$(this).hide();
$('#menu').html('show menu');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="menu">show menu</button>
<nav class="pushmenu pushmenu-left" style="display:none; left:-100px; position: relative">
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>

Click outside div and icon, div hide

HTML:
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Jquery:
$("header .menu-icon").click(function() {
$(".menu-drop").slideToggle();
});
CSS:
.menu-drop {
display: none;
}
I want when click outside .menu-drop and .menu-icon then .menu-drop div hide
when clicking menu-drop div it will stay not hide.

Use mouseup with document like below.
const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
if (!$menu.is(e.target) &&
$menu.has(e.target).length === 0) {
$(".menu-drop").hide();
}
});
$('.menu-icon').on('click', () => {
$(".menu-drop").slideToggle();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

On document click, you can check whether the clicked element has the specific class or not, if it does not have the class slideUp() the menu. You also have to prevent the event propagation on clicking the menu.
$(".menu-icon").click(function(e) {
e.stopPropagation();
$(".menu-drop").slideToggle();
});
$(document).click(function(e) {
if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
$(".menu-drop").slideUp();
}
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Use a single event listener on the body. Query the event target and show and hid the menu as required.
$(document).ready(function() {
/*Add event listener to document*/
$(document).click(function(event) {
//If the target is the icon, toggle the menu
console.log(event.target);
console.log($(event.target).closest(".menu-drop").length)
if(event.target.matches(".menu-icon"))
{
$(".menu-drop").slideToggle();
}
//Otherwise if outside the menu, slide up
else if($(event.target).closest(".menu-drop").length === 0 )
{
$(".menu-drop").slideUp();
}
});
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Here some modification
$(".menu-icon").click(function(e) {
$(".menu-drop").slideDown();
});
$(document).on('click', function (e) {
if(!$(e.target).hasClass('menu-icon'))
$(".menu-drop").slideUp();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Adding an active class to menu using jquery problem

I'm new to Jquery/JS and still learning. I need to add an "active" class to my menu. I know there are already many similar questions across this forum and web as well but nothing works. It had bugged me for days and I still couldn't figure out the problem.
Here is my HTML :
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav><!-- #nav-menu-container -->
Here is my code to add the class:
$('.nav-menu a, #mobile-nav a').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
});
I'm sorry I didn't explain it in detail before. I want the link menu to be redirecting to another page. The code originally came from a one page-web theme I use, but I customize it to fit my multi-page web application.
Thanks again.

You can do:
$('.nav-menu').on('click', function (e) {
e.preventDefault();
$('.nav-menu .menu-active').removeClass('menu-active');
$(e.target).parent('li').addClass('menu-active');
});
li.menu-active a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>

<div id="side-bar">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Services</li>
<li>What to expect</li>
<li>Representative clients</li>
<li>Success stories</li>
<li>Current litigation</li>
<li>What if you could not be a doctor?</li>
</ul>
</div>
script
$(document).ready(function () {
alert(localStorage.getItem("selectedolditem"));
$("#side-bar a").click(function () {
var id = $(this);
$(".active").removeClass("active");
$(id).addClass("active");
localStorage.setItem("selectedolditem", $(id).text());
alert(localStorage.getItem("selectedolditem"));
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem !== null) {
$("a:contains('" + selectedolditem + "')").addClass("active");
}
});
css
.active {color:red;}

If you have multiple pages try with this. the below code activate the menu with the current page
when you have like this.
<nav id="nav-menu-container">
<ul class="nav-menu">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav><!-- #nav-menu-container -->
<script>
$(function() {
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('menu-active');
});
</script>

Here is how it can work with localStorage.
I am afraid the snippet tool does NOT allow localStorage so you will have to see it working here:
https://repl.it/#PaulThomas1/BraveOffbeatByte
document.addEventListener('DOMContentLoaded', () => {
// try and load
if (localStorage) {
let active = localStorage.getItem('activeMenu');
if (active) document.querySelector(`a[class="${active}"]`).classList.add('active');
}
});
document.addEventListener('click', (e) => {
// try and save
if (e.target.matches('a') && localStorage) {
localStorage.setItem('activeMenu', e.target.className);
}
});
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
<!-- #nav-menu-container -->

Dropdown Button Closing on every click anywhere on the drop down

I made a dropdown that I took from templates on the internet. Here's what I've comed up with but is having a trouble. The problem is, everytime I'm clicking on each link on the dropdown, the dropdown closes. Here's the code:
jQuery(document).ready(function($){
//open/close mega-navigation
$('.cd-dropdown-trigger').on('click', function(event){
event.preventDefault();
toggleNav();
});
//close meganavigation
$('.cd-dropdown .cd-close').on('click', function(event){
event.preventDefault();
toggleNav();
});
//on mobile - open submenu
$('.has-children').children('a').on('click', function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
});
//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
var submenuDirection = ( !$('.cd-dropdown-wrapper').hasClass('open-to-left') ) ? 'right' : 'left';
$('.cd-dropdown-content').menuAim({
activate: function(row) {
$(row).children().addClass('is-active').removeClass('fade-out');
if( $('.cd-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
},
deactivate: function(row) {
$(row).children().removeClass('is-active');
if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
$('.cd-dropdown-content').find('.fade-in').removeClass('fade-in');
$(row).children('ul').addClass('fade-out')
}
},
exitMenu: function() {
$('.cd-dropdown-content').find('.is-active').removeClass('is-active');
return true;
},
submenuDirection: submenuDirection,
});
//submenu items - go back link
$('.go-back').on('click', function(){
var selected = $(this),
visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
});
function toggleNav(){
var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
$('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
$('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
if( !navIsVisible ) {
$('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('.has-children ul').addClass('is-hidden');
$('.move-out').removeClass('move-out');
$('.is-active').removeClass('is-active');
});
}
}
//IE9 placeholder fallback
//credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
HTML Code
<div class="cd-dropdown-wrapper nav-div cd-dropdown-trigger" href="#0" id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<nav class="cd-dropdown">
<h2>Title</h2>
Close
<ul class="cd-dropdown-content">
<li class="has-children">Catalog
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back">Menu</li>
<li class="see-all">All Products</li>
<li class="has-children">Travel Gear
<ul class="is-hidden">
<li class="go-back">Clothing</li>
<li class="has-children">Soft Shell
<ul class="is-hidden">
<li class="go-back"></li>
<li>Soft Shell Gen1</li>
<li>Soft Shell Joey</li>
<li class="see-all">All Soft Shell Jackets</li>
</ul>
</li>
<li class="has-children">Sweatshirts
<ul class="is-hidden">
<li class="go-back"></li>
<li class="see-all">All Sweatshirt Jackets</li>
<li>Sweatshirts Gen1</li>
<li>Sweatshirt Joey</li>
</ul>
</li>
<li class="has-children">Polar Fleece
<ul class="is-hidden">
<li class="go-back"></li>
<li class="see-all">All Polar Fleece</li>
<li>Polar Fleece Gen1</li>
<li>Joey Polar Fleece</li>
</ul>
</li>
<li>Windbreakers</li>
<li>Travel Pillow</li>
</ul>
</li>
</ul>
<!-- .cd-secondary-dropdown -->
</li>
<li>About Us</li>
<li>FAQ</li>
<li>Make Money Selling our Jackets</li>
</ul>
<!-- .cd-dropdown-content -->
</nav>
<!-- .cd-dropdown -->
</div>
<script>
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
$("document").ready(function() {
$('#nav-icon2').on('click', function(e) {
if($(this).hasClass('open')) {
e.stopPropagation();
}
});
});
</script>

if you have a open and close button, you should do a hide show. not a toggle.
for instance have a button that adds a style or adds a class with the CSS display:none;
<div style="display:none;">Hidden Stuff</div>
then have a button that gives it the CSS property display:block;
<div style="display:block;">Shown Stuff</div>
but more importantly, its not included in the snippit but i thought i'd ask, do you include jQuery in the <head> tag of your index.html?