Develop Reference

Closing dropdown menu on parent's click [duplicate]

I want to have my menu closed when the user clicks outside the menu, not only outside the navbar element. Because I have more collapses in my menu, this solution did not work for me: How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
The menu disapeares when I click outside the menu, but when I click on the link with a dropdown, the whole menu collapses.
<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="list-group panel">
Webshop
<ul class="collapse" id="submenu-1">
Industriële verpakkingen
Promotionele verpakkingen
Gelamineerde verpakkingen
Enveloppen &verzend verpakkingen
Medische verpakkingen
Co-packing
</ul>
</li>
</ul>

You can use this to collapse if not clicking a link: fiddle
$(document).click(function(e) {
if (!$(e.target).is('a')) {
$('.collapse').collapse('hide');
}
});

another alternative, you can add code below :
<script>
$(document).ready(function(){
$(".list-group ").hover(
function() {
$('.collapse', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.collapse', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
</script>
another example : dtc-eng

Here is my take on this:
$(document).on('click', function(event){
var $clickedOn = $(event.target),
$collapsableItems = $('.collapse'),
isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
isLink = ($clickedOn.closest('a').length == 1),
isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);
if( (!isToggleButton && isLink) || isOutsideNavbar ) {
$collapsableItems.each(function(){
$(this).collapse('hide');
});
}
});
This solution handles:
single page website/applications (and will work on multi-pages too).
clicks on:
.navbar-toggle elements (could be <buttons> or <a>, and it handles clicks on potential inner elements like <span> or <strong> or whatever).
on simple <a> elements (again, it handles clicks on inner elements).
just outside some particular parent (ie. .navbar).
multiple collapsable (.collapse) elements that might be open (indistinct to where they are placed in the DOM).
Not enough for you? No problem. You can customize most of the selectors passed to jQuery (document, .collapse, .navbar, etc) to suit your needs or even add more conditions.

Burger menu back to 3 links after menu item is clicked

I have a burger icon that when clicked turns into an X. When clicked again turns back into the 3 lines. I have it working so when the links are clicked the menu goes away, but the burger menu doesn't return back to 3 lines. Nothing I have tried is working. Here is what I have.
var burgerIcon = $('.burger-icon');
function toggleBurger(){
burgerIcon.click(function(){
if(burgerIcon.hasClass("is-active") === true)
{
burgerIcon.removeClass("is-active");
//console.log("remove");
}
else
{
burgerIcon.addClass("is-active");
//console.log("add");
}
});
}
toggleBurger();
$('.toggle-nav').click(function() {
$('body').toggleClass('show-nav');
return false;
});
$('nav ul li > a').click(function(){
//console.log("clicked");;
$('body').trigger( "click" );
burgerIcon.trigger( "click" );
});
HTML:
<nav>
<ul data-magellan-expedition="fixed">
<li data-magellan-arrival="work">
Work
</li>
<li data-magellan-arrival="about">
About
</li>
<li data-magellan-arrival="shadow">
Shadow CC
</li>
<li data-magellan-arrival="clients">
Clients
</li>
</ul>
</nav>
Here is a fiddle of what I'm trying to explain: jsFiddle

Since you are using jQuery in your code you can leverage that and then really ALL you need I believe is this:
$('nav ul li > a,.c-hamburger').click(function () {
console.log("clicked");
$('body').toggleClass('show-nav');
if ($('body').hasClass('show-nav')) {
$('.c-hamburger').addClass("is-active");
} else {
$('.c-hamburger').removeClass("is-active");
}
});
Updated fiddle: http://jsfiddle.net/qe38m0t9/2/
NOTE: this uses two selectors, one for the "hamburger" thing and another for the menu separated by a comma then does the same thing depending upon which is clicked.

Dropdown that hides on click outside of the menu

I've got a simple dropdown script and I want it to hide all open dropdowns on a click outside of the menu. But it does not seem to work, does anyone know why?
You can find it here: http://codepen.io/dr-potato/pen/rLleC?editors=101
HTML
<ul>
<li>Home</li>
<li class="Navigation-listItem is-dropdown">
About
<ul class="Navigation-list is-dropdown is-hidden">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="Navigation-listItem is-dropdown">
Contact
<ul class="Navigation-list is-dropdown is-hidden">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
CSS
.Navigation-list {
display: block;
}
.Navigation-list.is-hidden {
display: none;
}
JS
$(document).ready(function() {
$('.Navigation-listItem').click(function() {
$(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
});
});
/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$(".Navigation-listItem.is-dropdown").addClass('is-hidden');
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$(".Navigation-listItem.is-dropdown").click(function(e){
e.stopPropagation();
});

Working Fiddle
jQuery Code
$(document).ready(function () {
$('.Navigation-listItem').click(function () {
$(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
});
/* Anything that gets to the document
will hide the dropdown */
$(document).on('click', function (event) {
if ($(event.target).closest('#menu').length == false) {
$(".Navigation-list.is-dropdown").addClass('is-hidden');
}
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$(".Navigation-listItem.is-dropdown ").click(function (e) {
e.stopPropagation();
});
});
With help from this answer

You can change the display property of your dropdown in this manner. This is just a rough code.
if(dropDownShow.css('display') != 'block'){
dropDownShow.css('display', 'block');
dropDownShow.css('position', 'absolute');
}
else{
dropDownShow.css('display', 'none');
}

With the info you gave and the codepen I can't see it working, but I suppose that $(document).click(function() to hide won't work because the drop down is inside the document so when you click it, it'll disappear. I recommend you to see this post How to hide/show drop down list content in HTML.

How to implement mouseleave in jquery

I have a small problem with sliding in jquery. On hover (mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
Here the problem is when I hover on the list the div slides down, but only after I hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if I mouse out of the list with out entering the div. How can this be done?

Better to use mouseover and mouseout will do it for you..
$("#hovercontent").bind("mouseout", function() {
$(this).slideUp("slow");
});

Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/
$("#mousehover").hover(function() {
$("#hovercontent").slideDown("slow");
}, function() {
if (!$("#hovercontent").hover()) {
$("#hovercontent").slideUp("slow");
}
});
$("#hovercontent").mouseleave(function() {
$(this).slideUp("slow");
});
you can try it out in fiddle.

Check out http://www.quirksmode.org/js/events_mouse.html. In your eventhandlers, check for the relatedTarget as described there. Use console.log in the eventhandlers to track what's happening. Unfortunately, I can't help further without having the CSS for the classes you use... maybe you could provide a testcase in JSBin at http://jsbin.com/ ?

try this
$(document).ready(function(){
$("#mousehover").mouseover(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent ,#mousehover").mouseleave(function(){
$('#hovercontent').slideUp("slow");
});
});

try it with event.type on 'hover'
You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave
$(document).ready(function(){
​$('#mousehover').on('hover',function(event){
switch(event.type){
case 'mouseenter': $("#hovercontent").slideDown("slow");
break;
case 'mouseleave': $("#hovercontent").slideUp("slow");
break;
}
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});

I recommend using a class:
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover" class="menu1">
<a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent" class="menu1">
Contents 1
</div>
JS:
<script>
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$(".menu1").mouseout(function(){
$("#hovercontent").slideUp("slow");
});
});​
</script>

Moving div don´t stops onclick event

I want to make an animation of 2 div´s but I don´t succeed :(.
I want the DIV Tablou to move left and the DIV Frame1, Frame2, etc... to appear but every time I click on my links the Tablou DIV moves left.
So far I succeed with the frames to appear and the DIV Tablou move left.
The question is: how can I make the DIV Tablou move left and stay there and when I click on Close button to move right to his original position??
Many thanks
The HTML:
<div id="tablou" onclick="move_left()">
<div id="logo"></div>
<div id="menu">
<ul>
<li>Main</li>
<li>About Us</li>
</ul>
</div>
<div name="frames" id="frame1"> Frame 1 </div>
<div name="frames" id="frame2"> Frame 2 </div>
The script that I am using:
function show(currentframe) {
$('div[name|="frames"]').each(function(index) {
if ($(this).attr("id") == currentframe) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
function move_left() {
$('#tablou').animate({
'marginLeft' : "-=250px"
});
}

In the function show you have to stop the event from bubbling, bu you can't do that as long as you're attaching event listeners like that. Use something more modern, and since I see you're using jQuery try something like this:
HTML code:
<div id="menu">
<ul>
<li>Main</li>
<li>About Us</li>
</ul>
</div>
Javascript:
$("#main").click(function(e) {
// This prevents that the event bubbles up to #tablou
e.stopPropagation();
// This prevents that clicking on the link adds # to the url
e.preventDefault();
show("frame1");
});
$("#aboutus").click(function(e) {
e.stopPropagation();
e.preventDefault();
show("frame2");
});