Delay on show/hide menu and submenu jQuery - javascript

I have menu and submenu:
$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
$(this).children('.sub-menu').show().delay(1000).fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-menu">
<ul>
<li class="has-children">
Item 1
<ul class="sub-menu">
<li>
Subitem 1
<ul class="sub-menu">
<li>EEEEE</li>
</ul>
</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2</li>
....
</ul>
</div>
This show submenu with delay. But when I hover on item he's hide, why? I need show menu and submenu always, when cursor on menu or submenu..

use two functions
for showing
$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
$(this).children('.sub-menu').show().delay(1000);
});
for hiding
$( ".my-menu ul li.has-children" ).on('mouseleave', function() {
$(this).children('.sub-menu').fadeOut();
});

Use jQuery hover it accepts two functions: first for mouseenter and second for mouseleave. Here is an example:
$( ".my-menu ul li.has-children" ).hover(
function() {
$(this).children('.sub-menu').show()
},
function() {
$(this).children('.sub-menu').delay(1000).fadeOut();
}
);

Use mouseenter and mouseleave with fadeIn and fadeOut
Dont forget to set the .sub-menu style="display:none"
$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
$(this).children('.sub-menu').fadeIn();
});
$( ".my-menu ul li.has-children" ).on('mouseleave', function() {
$(this).children('.sub-menu').fadeOut();
});

you can update like this
$( ".my-menu ul li.has-children" ).on('mouseenter', function() {
$(this).children('.sub-menu').delay(20).show();
});
$( ".my-menu ul li.has-children" ).on('mouseleave', function() {
$(this).children('.sub-menu').show().delay(20).fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-menu">
<ul>
<li class="has-children">
Item 1
<ul style="display: none;" class="sub-menu">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2</li>
....
</ul>
</div>

$(".my-menu ul li.has-children").on('mouseenter', function () {
$(this).children('.sub-menu').show();
});
$(".sub-menu").on('mouseleave', function () {
$(this).fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-menu">
<ul>
<li class="has-children">
Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2</li>
....
</ul>
</div>

Related

Children access for a multiple li in ul

I want to change the class of ul inside the ul.navigator trying to change it only on the one li I click. But this doesn't change anything, doesn't work. some help?
$('.navigator').children('li ul').each(function() {
if ($(this).hasClass('opened')) {
$(this).addClass('closed');
$(this).removeClass('opened');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
.opened {
color: green
}
.closed {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>
You need to use .find() instead of .children()
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
$('.navigator').find('li ul')
OR, Descendant selector
$('.navigator li ul')
$('.navigator').find('li ul').click(function() {
if ($(this).hasClass('opened')) {
$(this).addClass('closed');
$(this).removeClass('opened');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
.opened {
color: green
}
.closed {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>
Try it like this:
$('.navigator > li').on('click', function() {
$('.navigator').children('li ul').each(function() {
if ($(this).hasClass('opened')) {
$(this).addClass('closed');
$(this).removeClass('opened');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
});
This way, when an li directly under .navigator is clicked, your code will fire.
using toggle Function
$('.navigator li').click(function(){
$(this).children('ul').toggleClass('closed');
});
Live Demo Here
snippet
$('.navigator li').click(function(){
$(this).children('ul').toggleClass('closed');
});
.closed
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>
Better use with toggleClass
$('.navigator li ul').click(function(){
$(this).toggleClass('closed');
});
or
for your way to solve the problem like below:
use childern apply with same line $('.navigator li ul').
Apply removeclass before addClass.
And Don't forget to add jquery library
Snippet
$('.navigator li ul').click(function(){
if($(this).hasClass('opened')){
$(this).removeClass('opened');
$(this).addClass('closed');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
.opened{color:green}
.closed{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>

Dynamic element doesn't respond on call

I have a menu and when I click a button to add a item to another item( to be a submenu) the item/parent doesn't respond to the jQuery code for the parent items.
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").click(function(event) {
event.preventDefault();
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>
Use
$("body").on('click',".test",function(event) {})
try:
$(".test").on('click',function(event) {})
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").on('click',function(event) {
event.preventDefault();
if($(this).parent().find("ul").length == 0) {
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
}
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>

nested list css problems

I am having trouble nesting a list in the following. The nested list isn't appearing on the page. I assume its something to do with my JS hiding it. Can anyone see what the problem may be - it's driving me mad!
<ul class="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>
My JS:
<script>
$(document).ready(function () {
$('#question > li > a').click(function(){
if (!$(this).hasClass('active')){
$('#question li ul').slideUp();
$(this).next().slideToggle();
$('#question li a').removeClass('active');
$(this).addClass('active');
}
else{
$('#question li ul').slideUp();
$('#question li a').removeClass('active');
}
});
});
</script>
Here:
http://jsfiddle.net/eAJjs/
$('#question > li > a').click(function () {
if (!$(this).hasClass('active')) {
$('#question>li>ul').slideUp();
$(this).next().slideToggle();
$('#question>li>a').removeClass('active');
$(this).addClass('active');
} else {
$('#question>li>ul').slideUp();
$('#question>li>a').removeClass('active');
}
});
<ul id="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>

High-light menu item

I have a one-page website with a menu like this:
<ul id="menu-menu" class="nav">
<li id="1">Item 1</li>
<li>Item 2
<ul>
<li id="1" class="sub">Item 2-1</li>
<li id="1" class="sub">Item 2-2</li>
<li id="1" class="sub">Item 2-3</li>
</ul>
</li>
<li id="1">Item 3</li>
<li id="1">Item 4</li>
</ul>
The menu is high-lighted by JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
var J = jQuery.noConflict();
J(document).ready(function(){
J('.nav li:first').addClass('current');
J('ul.nav').each(function() {
J(this).find('li#1').each(function(i) {
J(this).click(function(){
J(this).addClass('current');
J(this).siblings().removeClass('current');
});
});
});
});
/* ]]> */
</script>
The problem is that when I click on Item 3 and than on Item 2-2, Item 3 stays high-lighted., and when I than click on Item 1, Item 2-2 stays high-lighted.
Any ideas how to fix this?
var J = jQuery.noConflict();
J(function(){
J('ul.nav li:first').addClass('current');
J('ul.nav li').click(function (e) {
J('ul.nav li.current').removeClass('current');
J(this).addClass('current');
e.stopPropagation(); // prevent the event click from bubbling up
});
});
Untested, but try to replace
J(this).addClass('current');
J(this).siblings().removeClass('current');
with
J('ul.nav .current').removeClass('current');
J(this).addClass('current');
.
The problem is that the sibling selector only finds just that, the siblings, and not the other elements.

Jquery code for multi-level dropdown navigation menu

All,
I am new to JQuery and trying to write JQuery code to create a multi level dropdown menu. The HTML looks like below:
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li> Sub Link 1.1.1</li>
<li> Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
The JQuery code I got so far is as under, but it's not opening and closing the submenus.How can I make it work?
$(document).ready(function () {
$('#ul.menu > li').hover(function () { $('ul:first', this).show(); },
function () { $('ul:first', this).hide(); }
);
$('#ul.menu li li').hover(function () {
$('ul:first', this).each(function () {
var p = $(this).parent();
$(this).css('top', p.position().top)
.css('left', p.position().left + p.width())
.show();
});},
function () { $('ul:first', this).hide(); }
);
});
Chick this out: http://jsfiddle.net/g5xSX/ , maybe it is exactly what you want
I created this fiddle, it's just a start but some of it it's working http://jsfiddle.net/mZzqu/2/
I simplified your markup (attach click handler to 'li', it's better)
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li id='1'> Sub Link 1.1.1</li>
<li>Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
jquery code
$.fn.dropdown = function (options) {
var settings = jQuery.extend({
timeout: 0.2
}, options);
var closetimer = null;
var ddmenuitem = null;
$(this).children('li').each(function(){
$(this).find('ul').hide();
});
$(this).find('li').hover(dropdown_open, dropdown_close);
document.onclick = dropdown_close;
function dropdown_open(event)
{
dropdown_canceltimer();
//dropdown_close();
ddmenuitem = $(event.target).children('ul').css('display', 'block');
}
function dropdown_close(event) {
$(event.target).parent('ul:not(#menu)').hide();
}
function dropdown_timer() {
closetimer = window.setTimeout(dropdown_close, settings.timeout * 1000);
}
function dropdown_canceltimer() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
return this;
}

Categories

Resources