Develop Reference

Hide dropdown div with jQuery on mouseout

I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?

Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.

you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps

<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/

In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});

Highlighting active link with jquery

I'm trying to highlight the active link, it does highlight it but the underline is suddenly removed. Can't figure out what I'm doing wrong:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).parent().addClass('active');
}
});
});
HTML:
<nav>
<ul>
<li><a class="active" href="#intro" title="Intro">Intro</a></li>
<li>What We Do</li>
<li>How We Do It</li>
<li>Our Modus Operandi</li>
</ul>
</nav>
Any help? Thanks.

I can say what you are doing wrong!! You are removing active class from a tag and then you are adding it to it's parent which is li. So basically what you need to do is add it back to current a and you can do so just by removing .parent() before adding active class and your updated function will be as below:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).addClass('active');
}
});
});

This one is simpler and it does the job:
$('nav li').click(function(e) {
e.preventDefault();
$('nav li a.active').removeClass('active');
$('a', this).addClass('active');
});
Fiddle here.

Trying to make a link "active" when another link is clicked

I need help help editing the following JavaScript.
<script>
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
===================================================================
In addition to the existing functionality, I need "link2" to become "active" when "link1" is clicked. See HTML below.
<h1 class="brand">Brand</h1>
<ul class="nav">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>

You can use the below code. A jsFiddle sample is available here.
$('.nav li a').on('click', function (event) {
event.preventDefault(); //Add this only if you want to stop the default link action.
$(this).parent().siblings('li').removeClass('active');
$(this).parent().addClass('active');
});
//The below is to make #link2 active whenever #link1 is clicked.
$('.brand a').on('click', function () {
$('.nav li:first').addClass('active');
$('.nav li:first').siblings('li').removeClass('active');
});

Assuming you should only have one active element on the page, you could do something like this.
$('.nav li a').on('click', function() {
$('.active').removeClass('active');
$(this).parent().addClass('active');
});
If not then you can use closest like so
$('.nav li a').on('click', function() {
$(this).closest('.active').removeClass('active');
$(this).parent().addClass('active');
});
From your comment i think this could work
$('.nav li a').on('click', function() {
$('active').removeClass('active');
var link = $(this).attr('href'), // link1
number = parseInt(link.substr(-1)), // 1
newHref = link.slice(0, link.length - 1) + number++;
$(newHref).addClass('active');
});
so if you click on link1 then link2 will get the active class and click on link2 then link3 will get it and so on....

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>

I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​

At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>

There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/

Jquery hover + position absolute = Problems in IE

I'm making a drop down menu and it works great in all modern browser but im not sure, it fails in IE, when i try to select the sub-elements of the submenu, it disappears.
This is the page: http://XXX/
and this is the JS code
$("nav li").hover(function(){
$(".subnavi-wrapper", $(this)).show();
}, function(){
$(".subnavi-wrapper", $(this)).hide();
});
EDIT: Apparently it's the margins on top of the dropdown which seem to activate the "mouseout" in IE! Aparently jQuery detects badly the area of the items with position absolute! :(

It's all because block "subnavi-wrapper" in Li element. You must remove DIV and try do it only by using Ul element. I made something like it here: http://www.muzykakoncerty.pl
here, something like this:
$('#menu > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
and my menu HTML code is:
<div id="menu">
<ul>
<li>
wstęp
</li>
<li>
<ul>
<li>Big Band</li>
<li>Arti Sound Concert</li>
<li>Leszczyńska Kapela Barokowa</li>
</ul>
zespoły
</li>
<li>
<ul>
<li>Dancing Sisters</li>
</ul>
taniec
</li>
<li>
o mnie
</li>
<li>
kontakt
</li>
</ul>
</div>
EDIT:
so try it:
$('nav > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});

What you have uses the multiple selector selector will show/hide both the nav li and the .subnavi-wrapper. I think you only need to toggle the .subnavi-wrapper
$("nav li").hover(function(){
$(".subnavi-wrapper").show();
}, function(){
$(".subnavi-wrapper").hide();
});
If you only want to show the .subnavi-wrapper under the current li:
$("nav li").hover(function(){
$(this).find(".subnavi-wrapper").show();
}, function(){
$(this).find(".subnavi-wrapper").hide();
});

// show
$("nav li").live('mouseover',function(){
$(".subnavi-wrapper").show();
});
// hide
$("nav li").live('mouseout',function(){
$(".subnavi-wrapper").hide();
});