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();
});

toggle active on nav-tabs

$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>

You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO

What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.

try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});

This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.

I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/

Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>

Jquery: Attaching "each" to an "on" event

I have a list of results, and I added an hover event to it using jQuery, so the title will be colored red.
It works just fine.
<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>
$(document).on({
mouseenter: function () {
$('.ttl').css("color","red");
},
mouseleave: function () {
$('.ttl').css("color","inherit");
}
}, ".hoverbox");
The thing is whenever I do mouseover on a single element, all of the elements turn red. I want only the specific element to go red.
I tried using jQuery's each() but couldn't wrap my head around how to use it with the given syntax.

Is there a reason you need to do this with JavaScript? This can be achieved really easily with CSS.
HTML:
<ul class="list">
<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>
</ul>
CSS:
.list > li:hover .ttl {
color: red !important; // if you have to override an already applied theme (like wordpress)
}

You can use the following to get the expected result.
$('.ttl').on('mouseenter',function() {
$(this).css("color","red");
}).on('mouseleave',function() {
$(this).css("color","inherit");
});

Solution without JS
https://jsfiddle.net/w4j5hsLh/3/
.hoverbox{
position:absolute;
z-index:999;
width:100%;
height:100%;
}
li{width:100px;height:100px;position:relative;}
li:hover > .ttl {
color:red;
}

You can't use $('.ttl') because it refers to all the .ttl elements you need to use $(e.currentTarget).parent().find('.ttl') to select the current .ttl element:
$(document).on({
mouseenter: function (e) {
$(e.currentTarget).parent().find('.ttl').css("color","red");
},
mouseleave: function (e) {
$(e.currentTarget).parent().find('.ttl').css("color","inherit");
}
}, ".hoverbox");
However, as others have said, using CSS is recommended over using JS.

You have to do minute change if you want to attach multiple event handlers simultaneously using a plain object.
$('.ttl').on({
mouseenter: function () {
$(this).css("color","red");
},
mouseleave: function () {
$(this).css("color","inherit");
}
});
Check this jsfiddle for demo

addClass and removeCLass in JS with loading content

I have problem with addClass and removeCLass in JS. I would like to do sth like that:
But I have a content div where I load files in PHP. But when I load sth the script resets and first li is selected. Scheme:
I click on Events, it gets new class and the content is load. Now when I click events, page loads and I see the content but class in first li.
How to change it?
EDIT:
OK guys I change code but it still doesn't work as I want. When I chenge "#" in links to url, the page loads as new and I lost this JS. (It starts again).
CODE:
$(document).ready(function () {
$("#MB1").click(function () {
$(this).addClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB2").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB3").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB4").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
});
});
#menu-div ul{
list-style-type:none;
}
.button a{
text-decoration: none;
color:green;
}
.button a:hover{
color: red;
}
.button.active a{
text-decoration: underline;
}
<div id="menu-div">
<ul>
<li id="MB1" class="button active">Home</li>
<li id="MB2" class="button">Projects</li>
<li id="MB3" class="button">About Us</li>
<li id="MB4" class="button">Contact</li>
</ul>
</div>

What happens when you assign the click action using
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
is that only the existing objects receive the event-handler.
You want to use something like this instead:
$("body").on('click', '#menu li a', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
By making body the target, even if the data loads after the script, the event-handler will be set.
In addition, any subsequent changes to the menu won't require you to reset the event handler.
EDIT
Per the changes to your example code:
When you have <a href="#" and so on, pressing the link does not make you leave the page.
You changed some of the links to <a href="?something" and so on. Clicking this link, the whole page is reloaded with the new querystring.
Are the links supposed to get data asynchronously?
If YES, you should return the jquery to the way it was... and use my answer above instead of the one you used of $(document).ready({[...].
If NO, I would suggest that you use PHP to make sure that the correct menu item is set to active.
Something along the lines of (I don't actually know php... this code may be completely off):
<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?>
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>

jquery make action when link menu item is clicked

I have three menu items here:
JSFIDDLE: FIDDLE LINK
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active">Blue<sup>beta</sup></li>
<li>Green<sup>beta</sup></li>
<li>Red</li>
</ul>
</div>
By default link blue is active.
I want whenever any link green or red is clicked, it should be active
Color of the label should be changed as per the link selected
I am facing trouble in this points.

You could add a DATA color on your li like that :
<li data-color="#0f0">Green<sup>beta</sup></li>
then use this code :
$(function () {
$(".menu-bar li a").click(function () {
$('.active').removeClass('active'); //Remove the current active item
var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
$("#l1").css("color", color); //Change color
});
});
Fiddle : http://jsfiddle.net/ZjgV4/6/

Something like this?
$(function () {
$(".menu-bar li a").click(function () {
$(".menu-bar li").removeClass("active");
$(this).parent().addClass("active");
});
});
http://jsfiddle.net/3mhCW/1/

Without completely doing everything, this should point you on the right track. A few things to note about your code - You should pass in the e event, to the click handler and use jQuery's e.preventDefault(); to stop the link. Also, you need to quote the value in the css function. .css("color", "red") otherwise you will get an undefined error that red is not defined. Instead of manipulating the css of the elements, I would use add/removeClass respectively and style the elements with css.
$(function () {
$(".menu-bar li a").click(function (e) {
e.preventDefault(); // stop the link from following the href
// remove the active class from everything
$(".active").removeClass("active");
// $(this).css("color", "red");
$(this).addClass("active");
});
});

I included the code here.
basically, i inserted the color name to a class each color has its own class and each LI has a global attribute data-* with the value of the color (the name of the class)
HTML:
add to all the li the attribute data-color="blue"
Add CSS:
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.red{
background-color:red;
}
jQuery:
$(function () {
$(".menu-bar li a").click(function () {
$('.menu-bar li.active').removeClass('active');
$(this).parent().addClass('active');
$("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));
});
});