Develop Reference

Auto hide navigation on click

So, I have this code, and I'm trying to understand how it works.
Let's say, I wanna make it auto hide when click on link on mobile, what should I add to my code? I guess it is something with js
Begginer here, so thanks to everyone! :)
(function ($) {
"use strict";
// Mobile Navigation
if ($('.main-nav').length) {
var $mobile_nav = $('.main-nav').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="fa fa-bars"></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('fa-times fa-bars');
$('.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('fa-times fa-bars');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header" class="fixed-top">
<div class="container">
<div class="logo float-left">
<img src="assets/img/logo/logo2.png" alt="" class="img-fluid">
</div>
<nav class="main-nav float-right d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Why Choose Us</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
</nav><!-- .main-nav -->
</div>
</header>

Hide a list when clicking outside (part 2)

The code below partly works, clicking the button toggles the menu. When the menu is visible I can click anywhere to close it.
But, if I click the button when the menu is visible it hides and then shows it again. That's not the expected behaviour.
$(".lang-toggle-btn").click(function() {
event.preventDefault();
$(this.nextElementSibling).fadeToggle();
});
$(document).mouseup(function(e) {
if (e.target.className == "lang-toggle-btn") {
return false;
}
var container = $(".lang-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
.lang-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lang-wrap">
<div class="lang-toggle">
<span>Currently viewing</span>
<button class="lang-toggle-btn"><span class="flag"></span><span class="country">United Kingdom</span></button>
<div class="lang-menu">
<ul>
<li><span class="flag"></span><span class="country">Deutschland</span></li>
<li><a class="active" href="/"><span class="flag"></span><span class="country">United Kingdom</span></a></li>
</ul>
</div>
</div>
</div>

You can try this code. This is happening cause when you click on button the class of the target element is country not lang-toggle-btn.
jQuery(".lang-toggle-btn").click(function() {
event.preventDefault();
event.stopPropagation();
jQuery(this.nextElementSibling).fadeToggle();
});
jQuery(document).mouseup(function(e) {
if(e.target.className == "lang-toggle-btn" || e.target.className == "flag" || e.target.className == "country"){
return false;
}
var container = $(".lang-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
.lang-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lang-wrap">
<div class="lang-toggle">
<span>Currently viewing</span>
<button class="lang-toggle-btn"><span class="flag"></span><span class="country">United Kingdom</span></button>
<div class="lang-menu">
<ul>
<li><span class="flag"></span><span class="country">Deutschland</span></li>
<li><a class="active" href="/"><span class="flag"></span><span class="country">United Kingdom</span></a></li>
</ul>
</div></div>
</div>

Try this code
$(document).ready(function() {
$(".lang-toggle-btn").click(function() {
event.preventDefault();
$(this.nextElementSibling).fadeToggle();
});
$(document).mouseup(function(e) {
if (e.target.className == "country") {
return false;
}
var container = $(".lang-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
});
Demo : https://codepen.io/creativedev/pen/wXKwOJ

When click outside, you also need the exclude the situation when click on the button. other wise the fadeToggle() will trigger twice.
$(".lang-toggle-btn").click(function(event) {
event.preventDefault();
$(this.nextElementSibling).fadeToggle();
});
$(document).mouseup(function(e) {
if (e.target.className == "lang-toggle-btn") {
return false;
}
var container = $(".lang-menu");
if (!$(".country").is(e.target) &&!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
.lang-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lang-wrap">
<div class="lang-toggle">
<span>Currently viewing</span>
<button class="lang-toggle-btn"><span class="flag"></span><span class="country">United Kingdom</span></button>
<div class="lang-menu">
<ul>
<li><span class="flag"></span><span class="country">Deutschland</span></li>
<li><a class="active" href="/"><span class="flag"></span><span class="country">United Kingdom</span></a></li>
</ul>
</div>
</div>
</div>

combine change active li and reload part of page javascript

I have two simple function on click in my page with js, first is to change css active in current li and the other is to reload content only .
change active li
$(".list li").on("click", function(){
$(".list li").removeClass('active');
$(this).addClass('active');
});
reload content only
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function(){
var page = $(this).attr('href');
$('.content').load('Passtel/'+page);
return false;
});
the problem is, it just function reload content only works if there two are running, but I've tested each of function works as it is.
How can I make both of function works together?
this is my content structure
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

You can accomplish that with only one function. Hope it helps!
jsbin.com
const ul = $(".list");
const list = ul.find('li');
ul.on("click", 'li a', function(e){
e.preventDefault();
list.removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
// replace this with your $('.content').load('Passtel/'+page);
$('.content').load('https://jgatjens.com/?' + page);
});

You can use something like this:
$(function () {
$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function () {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active'); //added parent() here
var page = $(this).attr('href');
$('.content').load('Passtel/' + page);
return false;
});
});
//$('.content').load('Passtel/dashboard');
$('ul.list li a').click(function (e) {
e.preventDefault();
$(".list li").removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
//$('.content').load('Passtel/' + page);
return false;
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="active">
<a href="dashboard">
<i class="material-icons">home</i>
<span>DASHBOARD</span>
</a>
</li>
<li>
<a href="check">
<i class="material-icons">text_fields</i>
<span>CHECK SITE</span>
</a>
</li>
<li>
<a href="datek">
<i class="material-icons">layers</i>
<span>DATA TEKNIS</span>
</a>
</li>
</ul>
</div>

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?

Dropdown Menu closed when we click all place

I have the following scripts in my dropdown menu:
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
HTML
<div class="menu">
<span>
<ul id="nav">
<li>Produk Teknik <i class='icons icon-right-dir'></i>
<div class="subs">
<div class="wrp3">
<ul>
<li><h3>Manometer</h3>
<ul>
<li><a href='#'>tes</a>
<ul>
<li><a href='#' class='anak'>tes-1</a></li>
</ul>
</li>
<li><br /></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
I need to change that script so that when we click all place, the dropdown menu will automatically be closed. Thank you
You can see my project example http://www.tokobesi.co.id/beta/

I think this is what you meant mate..Try this.. :)
$(document).click(function(e){
if( $(e.target).closest(".menu").length > 0 ) {
return false;
}else{
$("#nav .selected").removeClass("selected");
}
});