I have problems with creating a dropdown menu with jQuery.
This code shows the sub menus on hover but I couldn't get the sub sub menu to work too
$(document).ready(function() {
$("li").has(".sub").hover(function() {
$(this).find(".sub").toggle();
});
});
Here's the JS code
http://codepen.io/anon/pen/rVmabP
Lose the sub-sub class and use the immediate descendant selector to help you:
HTML
<ul id="nav">
<li>11111
<ul class="sub">
<li>2</li>
</ul>
</li>
<li>11111
<ul class="sub">
<li>2</li>
<li>22222
<ul class="sub">
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$(document).ready(function() {
$("li").has("> .sub").hover(function() {
$(this).find("> .sub").stop().slideToggle();
});
});
JSFiddle
Note that this would work for unlimited nested .subs.
Related
I want jquery to include <li> and all other tags inside <ul class="visib-1"></ul> to <ul class="visib-2"></ul> without writing li,a href="" tags again. Is there have any solution?Is it possible to capture all elements from one UL and transfer to other UL?
From:
<ul class="visib-1">
<li>Home</li>
<li>Properties</li>
<li>Blog</li>
<li>Start Now</li>
</ul>
To:
<ul visib-1>
?
</ul>
If all you want is to move from one <ul> to another:
$('#first-ul-id li').appendTo('#second-ul-id');
If you want to copy use clone()
$('#first-ul-id li').clone().appendTo('#second-ul-id');
Here is the solution. Check the code below:
This code will also copy the event handlers attached.
var cloneOfOld = $('[data-status="old"]').clone(true);
cloneOfOld.attr('data-status','new');
var newUl = $('[data-status="new"]');
newUl.replaceWith(cloneOfOld);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-status="old"><li>Home</li>
<li>Properties</li>
<li>Blog</li>
<li>Start Now</li>
</ul>
<ul data-status="new">
</ul>
Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle
I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/
Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
I'm trying to get the following to behave so that when one of the filter-name list items are clicked it shows the ul below it (all ul's with .filter-options are hidden by default) and hides any other ul list that is open. Clicking again on the same filter-name list item would hide that ul as well. Also it would be brilliant if you clicked anywhere else that all of the ul's (.filter-options) would hide.
<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
<ul class="filter-options" id="Colour-options-list">
<li>Black</li>
<li>Red</li>
<li>Green</li>
</ul>
<li>
<li class="filter-name" id="Material-filter">Material
<ul class="filter-options" id="Material-options-list">
<li>Glass</li>
<li>Wax</li>
<li>Resin</li>
</ul>
</li>
<li class="filter-name" id="Size-filter">Material
<ul class="filter-options" id="Size-options-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
Here is my current jQuery that some what works...
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#narrow-by-list .filter-name').click(function(event) {
jQuery('ul.filter-options').not('> ul', this).hide("fast");
jQuery('ul.filter-options', this).toggle("fast");
event.stopPropagation();
});
});
Thanks for the help in advance!
You have html errors (you put open tags instead of close tags and forgot to close your ul's, that's mainly why nothing was working), here's the corrected version:
<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
<ul class="filter-options" id="Colour-options-list">
<li>Black</li>
<li>Red</li>
<li>Green</li></ul>
</li>
<li class="filter-name" id="Material-filter">Material
<ul class="filter-options" id="Material-options-list">
<li>Glass</li>
<li>Wax</li>
<li>Resin</li></ul>
</li>
<li class="filter-name" id="Size-filter">Material
<ul class="filter-options" id="Size-options-list">
<li>1</li>
<li>2</li>
<li>3</li></ul>
</li>
</ul>
And here's the js that works:
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#narrow-by-list .filter-name').click(function(event) {
jQuery(this).find('ul.filter-options').toggle("fast").end().siblings().find('ul').hide('fast');
event.stopPropagation();
});
});
Check out the fiddle here. It finds the filter options within the this context, shows them, goes to its siblings and hides the list within them.
Try this - DEMO
$("li.filter-name").on("click", function() {
if ( $("ul", this).is(":visible") ) {
$("ul", this).slideUp("fast");
} else {
$("li.filter-name ul").slideUp("fast");
$("ul", this).slideDown("fast");
}
});
$("body").on("click", function(e) {
if ( !$(e.target).is("li") ) {
$("li.filter-name ul").slideUp("fast");
}
});
you have got some html missing declarations, i corrected them and changed your jQuery way:
here is demo
jQuery:
$(document).ready(function(){
$('.filter-options').slideUp('fast');//hide all filters at the begining
//you can use fast/slow or time declarations with miliseconds
$('#narrow-by-list .filter-name').click(function() {
$('.filter-options').slideUp(500);//hide all filters
$(this).children('.filter-options').slideDown(500);//show clicked ele's filters
//you can use other animations instead of slideUp/Down, like fadeIn() and fadeOut(), or pure hide() / show()
});
});
and note that $ === jQuery
html:
<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
<ul class="filter-options" id="Colour-options-list">
<li>Black</li>
<li>Red</li>
<li>Green</li>
</ul>
<li>
<li class="filter-name" id="Material-filter">Material
<ul class="filter-options" id="Material-options-list">
<li>Glass</li>
<li>Wax</li>
<li>Resin</li>
</ul>
</li>
<li class="filter-name" id="Size-filter">Numbers
<ul class="filter-options" id="Size-options-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>