Basically what I have is a dropdown menu, when I click on the #default li a dropdown ul appears containing two list items. The idea is that when you move your mouse out of the dropdown ul or when you click on a .sub-option, the dropdown ul will fadeOut. This works, however, if I click on a .sub-option and the dropdown ul starts to fade, and then hover over the ul before the fadeOut is done, it will stop fading and the ul will reappear.. How do I prevent this from happening? I want nothing to happen when you move your mouse over the ul when it's fading out.
I tried adding a mouseenter event that checks if the ul is being animated but I'm not sure what exactly to put inside of this function, a simple return did not work. Any ideas on how to alter my code below so that it behaves properly?
The dropdown:
<ul id="sort-options">
<li id="default"><span>A-Ö</span>
<ul>
<li class="sub-options">A-Ö</li>
<li class="sub-options">Ö-A</li>
</ul>
</li>
</ul>
The script that toggles the dropdown:
$('#default').on('click', function() {
$('#default ul').stop().fadeToggle();
});
$('#default').on('mouseleave', function() {
$('#default ul').stop().fadeOut();
});
$('#default').on('mouseenter', function() {
if ($('#default ul').is(':animated')) {
return;
}
});
jsBin demo
$('#default').on('click', function(e) {
$('ul', this).stop().fadeToggle();
}).on('mouseleave', function() {
$('ul', this).fadeOut(); /* don't use .stop() */
});
the above works cause the .stop() used on the click event will stop any ongoing animations (the mouseleave fadeOut() which happens once the elements start to fadeToggle) and win! :)
Otherwise you need to stop the click bubble up the DOM tree and use:
jsBin demo using event.stopPropagation
$('#default').on('click', function() {
$('ul', this).stop().fadeToggle();
}).on('mouseleave', function() {
$('ul', this).stop().fadeOut(); // use .stop() but the issue will appear
});
$('#default li').on('click', function(e) {
e.stopPropagation(); // so dont let #default register any inner LI clicks
});
Related
below is my jquery code for a dropdown menu :
$(function(){
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".menu").toggle();
});
var ww = document.body.clientWidth;
if (ww < 1000) {
$(".toggleMenu").css("display", "inline-block");
$(".menu").hide();
$(".menu ul li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".menu li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
})
what i am trying to do is add the class "hover" to the "li" of the clicked "a" so that the drop down menu works properly on mobile deivices(device with less than 1000px in my case). but with the code above, i need to click twice to any "a" element for the dropdown to apper, as far as i am concerned when i click on "a" element, the class "hover" should be added to its parent "li" element and the hidden "ul" under it should be shown(because i have written the css in that manner) but at the moment i should click on the "a" element two times(not double click).The html structure is like:
<ul>
<li>
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
Im trying to create a dropdown with jQuery.
So far I have written my code to show the menu, but once open and my users clicks an item, the menu then closes.
Anybody have an idea of how to combat this?
http://jsfiddle.net/8fnhb6yr/
// Language selector
$('.sub-lang').on('click', function(e){
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
Just check also if e.target parent is li.sub-lang like the following
$('.sub-lang').on('click', function(e){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('sub-lang')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
li ul {display:none;}
li.sub-lang.active ul {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="sub-lang">
English
<ul style="">
<li>International</li>
<li>UK & Ireland</li>
</ul>
</li>
The menu close because you listen to the click event on the menu (.sub-lang).
When you click on a children, the event will "bubble" and the parent will have the event too. So you have to listen to the click event on children too to prevent it to bubble :
$('.sub-lang ul a').click(function(event) {
event.stopPropagation();
event.preventDefault();
});
I edited your fiddle
I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});
i have the following script that shows a div when a link is clicked...
$(document).ready(function() {
$('.accordion ul li h1').click(function() { $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); if ($(this).next().is(':hidden')) $(this).next().slideToggle().parent().addClass('active'); });
});
I also have a div on my page
<div id="shortinfo">short info</div>
How would i go about setting short info to didssapear when the link is clicked,, and reappear once its clicked again?
I tried adding
<h1 onclick="document.getElementById('shortinfo').style.display='none'">
but then i need it to reappear once its clicked again?
this is my new code, doesnt seem to work witht he toggle
$(document).ready(function() {
$('.accordion ul li h1').click(function() { $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); if ($(this).next().is(':hidden')) $(this).next().slideToggle().parent().addClass('active'); });
$('#shortinfo').toggle();
});
As you are using JQuery, you can use Toggle method to display or hide the element: http://api.jquery.com/toggle/
You could then do the following:
$('#shortinfo').toggle();
To integrate it with your h1 onclick, it would become:
<h1 onclick="$('#shortinfo').toggle()">
delete that onclick
$("#shortinfo").toggle();
I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.
I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.