Develop Reference

How to close navbar when clicking outside of it

How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});

$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.

$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});

Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}

Toggle JQuery dropdown menu

I have a drop down menu that has different heights based on a selection of classes - one-row, two-row, three-row.
The main content of the site also animates down depending on these classes.
I have also implemented a function that makes the menu reset if the user clicks outside of it.
Everything is working as required other than the fact the I cannot use 'toggleClass' to make the menu close if the link is clicked again.
Can any of you JQuery gurus help me out here?
// ============================================================
//
// DROP DOWN MENU
//
// ============================================================
$('.submenu-toggle').on('click', function (e) {
// Reset all other drop downs and icons
$('.submenu').removeClass('drop-down');
$('.submenu-toggle').find('.fa-angle-down').removeClass('rotate');
// Drop down this menu
$(this).find('.submenu').addClass('drop-down');
// Rotate the icon
$(this).find('.fa-angle-down').addClass('rotate');
// Drop the main content wrapper down depending on the
// number of rows in the drop-down menu
if ($(this).find('.submenu').hasClass('one-row')) {
$('.content-wrapper').addClass('one-row-drop-down');
$('.content-wrapper').removeClass('two-row-drop-down three-row-drop-down four-row-drop-down');
}
if ($(this).find('.submenu').hasClass('two-row')) {
$('.content-wrapper').addClass('two-row-drop-down');
$('.content-wrapper').removeClass('one-row-drop-down three-row-drop-down four-row-drop-down');
}
if ($(this).find('.submenu').hasClass('three-row')) {
$('.content-wrapper').addClass('three-row-drop-down');
$('.content-wrapper').removeClass('one-row-drop-down two-row-drop-down four-row-drop-down');
}
e.stopPropagation();
});
// Reset dropdowns and reset icon on click outside
$(document).on('click', function () {
$('.submenu').removeClass('drop-down');
$('.submenu-toggle').find('.fa-angle-down').removeClass('rotate');
$('.content-wrapper').removeClass('one-row-drop-down two-row-drop-down three-row-drop-down');
});

You need to use jquery toggle
http://api.jquery.com/toggle/
See here some examples http://api.jquery.com/toggle/#entry-examples
$( "#foo" ).toggle( display );
is equivalent to:
if ( display === true ) {
$( "#foo" ).show();
} else if ( display === false ) {
$( "#foo" ).hide();
}

Foundation and smoothstate doesn't open reveal modal

I'm using FoundationPress and smoothstate on my WordPress page. Now on mobile, I created a menu using hamburgers and reveal modal and works fine but after clicking on something, the menu won't open anymore. I think this is because of the smoothstate.js not reloading the script.
As an option of the smoothstate, I have this script:
onAfter: function($container, $newContent) {
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$('#abnavmodal').foundation('toggle');
event.preventDefault();
});
Here's my website. Note that the menu only appears on mobile.

I fixed the script by changing to the new Foundation 6 programmatic use plugin declaration
Here's my final script:
onAfter: function($container, $newContent) {
var $modal = new Foundation.Reveal($('#abnavmodal'), {
animationIn: 'slide-in-left',
animationOut: 'slide-out-left'
});
// Hamburgers
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$modal.toggle();
event.preventDefault();
});
});

Multiple buttons with the same #id to do the same function?

JS beginner, sorry
How can could I make it so that every button that has the id "#popit" to open the same popup box?
I'm using bPopup
With this code there is only one button on the site which does open the popup
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
http://jsfiddle.net/yg5so25s/ - there are 3 buttons with the same id, but only the first one opens the popup box, anyway I could make it so that every single button to open the same popupbox?

id must be unique, you need to use class instead:
<button class="my-button">POP IT UP</button>
then you can use . to target elements by class name:
;(function($) {
$(function() {
$('.my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Updated Fiddle

use common class for all buttons
$('.commonClass').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
DEMO

JQuery Toggle...one click to open - double to close

I created a mobile menu with a toggle switch.
When I click on the div "dropdown-menu" it opens.
When I click again it closes. But i want it to open with one click and to close with double click.
What do I need to add to my code??
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");}
);
$('.dropdown-menu').blur(function() {
$('.dropdown-inside').hide('slow', function() {
});
});

Try to use dblclick,
$('.dropdown-menu').click(function() {
$('.dropdown-menu').children('ul').slideUp("slow");// slideUp all drop-downs
$(this).children('ul').slideDown("slow");// use slideDown instead slideToggle
});
$('.dropdown-menu').dblclick(function() {
$(this).children('ul').slideUp("slow");
});
To prevent sliding after clicking once try this,
$('.dropdown-menu').click(function() {
if( !$(this).children('ul').is(':visible')) {// slide, if ul is not visible
$('.dropdown-menu').children('ul').slideUp("slow");
$(this).children('ul').slideDown("slow");
}
});