drop-list is keeping slideup and down many times - javascript

jQuery drop-list is keeping slideup and down many times
HTML:
<nav class="main-nav">
<img src="img/logo.jpg">
<ul class="nav-list">
<li>Home Page</li>
<li>About us</li>
<li>Products
<ul class="dropdown">
<li> Product 1</li>
<li> product 2</li>
<li>product 3</li>
<li>Product 4</li>
<li>product 5</li>
<li>product 6</li>
</ul>
</li>
<li>Career</li>
<li>Contact us</li>
</ul>
</nav>
JavaScript:
$(function () {
$("li").has(".dropdown").hover(
function () {
$(this).find(".dropdown").slideDown();
},
function () {
$(this).find(".dropdown").slideUp();
}
);
});

When you are hovering in and out of the Products item multiple times in quick succession, the slideDown and slideUp animations get queued. Call stop() to cancel the current animation before doing a new slideDown or slideUp:
$("li").has(".dropdown").hover(
function () {
$(this).find(".dropdown").stop().slideDown();
},
function () {
$(this).find(".dropdown").stop().slideUp();
}
);

Related

jQuery - Expand Tree View up to selected node level

I am trying to expand the tree view up to selected node level. But I am not getting any idea about this please can any one help me on this.
For example We clicked on 'Parent d' in 'Category list' then expand 'Tree View List' up to 'Parent d' level for more details check Here
HTML
<h3>
Category list
</h3>
When click on any li expand tree list up to selected level
<ul id='category'>
<li li-id='1' id='1'>Parent 1</li>
<li li-id='2' id='2'>Parent 2</li>
<li li-id='3' id='3'>Parent 3</li>
<li li-id='4' id='4'>Parent 4</li>
<li li-id='5' id='5'>Parent c</li>
<li li-id='6' id='6'>Parent d</li>
<li li-id='7' id='7'>Parent a</li>
<li li-id='8' id='8'>Parent b</li>
<li li-id='9' id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
Tree View List
<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
<li parent-id='0' li-id='1'>Parent 1</li>
<li parent-id='1' li-id='2'>Parent 2</li>
<li parent-id='1' li-id='3'>Parent 3</li>
<li parent-id='1' li-id='4'>Parent 4</li>
<li parent-id='3' li-id='5'>Parent c</li>
<li parent-id='3' li-id='6'>Parent d</li>
<li parent-id='2' li-id='7'>Parent a</li>
<li parent-id='4' li-id='8'>Parent b</li>
<li parent-id='4' li-id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
</div>
jQuery
//$('#ulCollapse li').hide();
$('ul li').click(function(){
var nodeId = $(this).attr('li-id');
alert(nodeId);
})
var $ul = $('ul');
$ul.find('li[parent-id]').each(function() {
$ul.find('li[parent-id=' + $(this).attr('li-id') + ']')
.wrapAll('<ul />')
.parent()
.appendTo(this)
});
DEMO
I am not a javascript developer but, tried to solve your problem, here is the working demo
var $ul = $('ul');
$(document).ready(function() {
$ul.find('li[parent-id]').each(function() {
$ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('<ul />').parent().appendTo(this)
// not changed its your code still, but I need this only first time, so moved into document ready
});
});
$('ul#category li').click(function() {
$("#ulCollapse1").html(''); // I have created a new div section
$("ul").removeAttr('class'); // remove active classes
var nodeId = $(this).attr('id');
arrangeNodes(nodeId);
$("#ulCollapse1").html($(".active").parent().clone()); //get the marked elements first parent (which is 'li')
$("#ulCollapse").hide(); // hide the main treeview
});
function arrangeNodes(item) {
$ul.find('li[parent-id=' + item + ']').parent().closest("ul").addClass("active"); // find item and mark the first ul as active (selected)
}
Hope helps,
I don't fully understand what you're trying to achieve.
But maybe :lt() is what you're looking for
HTML
<h3>
Category list
</h3>
<ul id='category'>
<li li-id='1' id='1'>Parent 1</li>
<li li-id='2' id='2'>Parent 2</li>
<li li-id='3' id='3'>Parent 3</li>
<li li-id='4' id='4'>Parent 4</li>
<li li-id='5' id='5'>Parent c</li>
<li li-id='6' id='6'>Parent d</li>
<li li-id='7' id='7'>Parent a</li>
<li li-id='8' id='8'>Parent b</li>
<li li-id='9' id='9'>Parent e</li>
<li li-id='10' id='10'>Parent x</li>
</ul>
<br>
<br>
<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
<li parent-id='1'>
<ul>
<li>Parent 1</li>
</ul>
</li>
<li parent-id='2'>
<ul>
<li>Parent 2</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
<li parent-id='3'>
<ul>
<li>Parent c</li>
<li>Parent d</li>
<li>Parent a</li>
</ul>
</li>
<li parent-id='4'>
<ul>
<li>Parent b</li>
<li>Parent e</li>
</ul>
</li>
<li parent-id='5'>
<ul>
<li>Parent x</li>
</ul>
</li>
</ul>
</div>
JS
$cats = $("#category");
$tree = $("#ulCollapse");
$tree.children().hide();
$cats.on("click", "li", function() {
var nodeId = $(this).attr('li-id');
console.info("NODE ID: ", nodeId);
$tree.children().hide();
var maxEq = $tree.children("[parent-id='" + nodeId + "']").index();
maxEq < 0 && (maxEq = 0);
maxEq++; //LTE since :lte() doesn't exist
console.info("MAX EQ: ", maxEq);
$tree.children(":lt(" + maxEq + ")").show();
});
FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/

jquery onclick parent remove child action

Actually I'm really very sorry about my question, I'm not sure how to make attention or ask question about this kind of problem.
Please see my code 1st.
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
The jquery code is:
<script>$('#product').click(function () {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists li').click(function () {
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
});
$('#lists li ul li').click(function () {
var item = $(this).data('item');
$('.code3').empty().append(item);
});</script>
You may directly view this at http://codepen.io/alshedupur/pen/YqKGqV
Everything is work fine, but my problem is, when I trigger parent list item like: Product 1 / Product 2 / Product 3
In result I want to empty .code3 span
I try to use $('.code3').empty(); on 2nd action but if I use this, then 3rd action I mean sub list click function not work.
Please see my screenshot for clearly understand what I want:
You need to empty .code3 as well.
$('#product').click(function() {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists > li').click(function(e) {
e.stopPropagation();
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty();
});
$('#lists li ul li').click(function(e) {
e.stopPropagation();
var item = $(this).data('item');
var dmodel = $(this).parents("li").data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty().append(item);
});
#product:hover,
li:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>

Hide/ show list items when clicking on h4 in .aspx page

I'm building a newsletter archive which is sorted in different categories. The markup looks like this:
<h4>Category 1</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
<h4>Category 2</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
Now there will be quite a lot of categories and newsletters so I want the newsletters to be hidden until the user clicks on the Category h4. And to hide again when clicked again.
I've tried this function:
<script type="text/javascript">
$('h4').click(function() {
$(this).find('ul').toggle();
});
</script>
I guess this isn't working because I would have to wrap the h4 in a ul but this results in an error. Any suggestions?
You need to use the jQuery .next function, so it will look for the next <ul> class after each h4 tag here is a quick demo demo:
(function( $ ) {
$('h4').click(function() {
$(this).next('ul').toggle();
});
}).apply( this, [ jQuery ]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Category 1</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
<h4>Category 2</h4>
<ul>
<li>Newsletter 1</li>
<li>Newsletter 2</li>
<li>Newsletter 3</li>
</ul>
And a
Jsfiddle demo

How to open correct sublist in dropdown menu

I got a small Javascript menu problem.
I got a ul list that looks something like this.
<ul class="mainmenu">
<li class="sub-handle">
Item 1
<ul class="submenu">
<li class="sub-li">item 1-1</li>
<li class="sub-li">item 1-2</li>
<li class="sub-li">item 1-1</li>
</ul>
</li>
<li class="sub-handle">
Item 2
<ul class="submenu">
<li class="sub-li">item 2-1</li>
<li class="sub-li">item 2-2</li>
<li class="sub-li">item 2-1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I got php to add submenu-i++ and that works just fine. Now I have a Javascript drop down function that looks like this.
var sub_handle = $('.sub-handle');
var sub_nav_ul = $('nav .submenu');
var sub_nav_ul_li = $('nav .mainmenu .sub-li');
$(sub_handle).on('click', function(){
sub_nav_ul.toggleClass('showing-sub');
sub_nav_ul_li.toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
sub_nav_ul.toggleClass('showing-sub');
});
The problem is that when I press any submenu all of my submenus open. I want Javascript somehow to count like php and see if submenu-i++ is pressed only that one expand.
I hope this is clear enough otherwise make a shout and I will try to explain futher.
Thanks in advance!
Get rid of the numbers in the classes, so all the sub-menus have ths same class. Then use DOM navigation methods to find the corresponding menu items to toggle.
var sub_handle = $('.sub-handle');
var sub_nav_ul_li = $('nav .mainmenu .sub-li');
sub_handle.on('click', function() {
$(this).find(".submenu").toggleClass('showing-sub');
$(this).find(".sub-li").toggleClass("smooth-anchor");
});
sub_nav_ul_li.on('click', function() {
$(this).parent().toggleClass('showing-sub');
});
.submenu {
display: none;
}
.submenu.showing-sub {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
<li class="sub-handle">
Item 1
<ul class="submenu">
<li class="sub-li">item 1-1</li>
<li class="sub-li">item 1-2</li>
<li class="sub-li">item 1-1</li>
</ul>
</li>
<li class="sub-handle">
Item 2
<ul class="submenu">
<li class="sub-li">item 2-1</li>
<li class="sub-li">item 2-2</li>
<li class="sub-li">item 2-1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul class="mainmenu">
<li class="sub-handle sub-handle-1">
Item 1
<ul class="submenu">
<li class="sub-li">item 1-1</li>
<li class="sub-li">item 1-2</li>
<li class="sub-li">item 1-1</li>
</ul>
</li>
<li class="sub-handle sub-handle-2">
Item 2
<ul class="submenu">
<li class="sub-li">item 2-1</li>
<li class="sub-li">item 2-2</li>
<li class="sub-li">item 2-1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
var sub_handle = $('.sub-handle');
var sub_nav_ul = $('nav .submenu');
var sub_nav_ul_li = $('.submenu .sub-li');
sub_handle.on('click', function(){
sub_handle.removeClass("showing-sub");
$(this).addClass('showing-sub');
sub_nav_ul_li.toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
$(this).parent().removeClass('showing-sub');
});
Will something like this work:
Note: I had to edit some of the html.
You are toggling the class on all the subitems. What you should do is traverse from the clicked handle to get the corresponding subitems for that. Something like this would suffice:
$(sub_handle).on('click', function(){
$(this).find(sub_nav_ul).toggleClass('showing-sub');
$(this).find(sub_nav_ul_li).toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
$(this).closest(sub_nav_ul).toggleClass('showing-sub');
});
This is in no way the best solution to this, but it should help.

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