Jquery menu ul toggle - javascript

I have this menu:
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
Each of the "#submenu" li fadeIn an ul sublist and hide the other sublists.
This are the sublist:
<ul class="sublist first_sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
<ul class="sublist second_sublist">
<li>Mini-Hamburgueses</li>
<li>Surtit Mini-Hamburgueses</li>
</ul>
<ul class="sublist third_sublist">
<li>Normal</li>
</ul>
<ul class="sublist fourth_sublist">
<li>Poltre</li>
</ul>
<ul class="sublist fifth_sublist">
<li>Porc ibèric de Gla</li>
</ul>
and this css:
.second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
display: none;
}
with this script:
$('#submenu li').click{
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});
The problem with the script is that it will get bigger if i have five sublists, cause i will have to make every click function per "#submenu" li.
Can someone help me to make it simple?

Use class instead of id for binding event so that you do not need id for binding the click event.
$('.clearfix li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});

This is the approach I would take:
Update: I forgot to mention, you could also get rid of the clearfix class.
HTML
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
<ul class="sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
<ul class="sublist">
<li>Mini-Hamburgueses</li>
<li>Surtit Mini-Hamburgueses</li>
</ul>
<ul class="sublist">
<li>Normal</li>
</ul>
<ul class="sublist">
<li>Poltre</li>
</ul>
<ul class="sublist">
<li>Porc ibèric de Gla</li>
</ul>
JavaScript
$('#submenu li').on('click',function(){
$this = $(this);
// move active class to current list item
$this.addClass('active').siblings().removeClass('active');
// make sure all the sublists are hidden,
// then determine the position of the list item
// in the ul, and select the corresponding sublist
// ex: selecting the 2nd list item in submenu would
// find the 2nd sublist and fadeIn
$('.sublist').hide().eq($this.index()).fadeIn();
});
Of course, this means the sublists would have to be in the same order as the submenu list items.

Check this fiddle
Use the HTML-5 data attributes to store the corresponding sublists in them..
Approaching this way you can use a single handler to show/hide the sublists on the page.
HTML
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
Javascript
$('#submenu li a').on('click',function() {
var $this = $(this);
var className = $this.data("class");
$('#submenu li a').removeClass('active');
$this.addClass('active');
$('.sublist').hide();
$('.'+ className).show();
});​

Use this if you have done your structure this way or if you change this way:
<ul id="submenu" class="clearfix">
<li>Vedella
<ul class="sublist first_sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
</li>
</ul>
$('#submenu li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('ul',this).fadeIn();
});

Related

How to add active class using JQuery?

I set the active class by onclick function.
when I click A (parent li) the li tags are active.
But when I click siblings li i.e A11 are active while parent li tags are inactive, the following problems ocur:
all the siblings and parent li tags are hidden
I want to display siblings li tags along with parent li tags
My code:
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>
My javascript:
<script type="text/javascript">
$( document ).ready(function() {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
</script>
As you can see in the snippet below, the bunch of code you provided is not enough for us to answer you. The li elements are not even clickable, for us to see the behaviour you describe.
$(document).ready(function () {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>

How to toggle <li> in a nested list?

I'm trying to be able to toggle these sub menus one at a time, I'm getting lost in nests and cant quite figure out how to target the correct list item,
I found that I should be using find() instead of children() as it can go deeper in the nest but still no luck in getting it working.
<ul>
<li>Profile</li>
<li>Edit</li>
<li class="drop-nav"> See your products
<ul>
<li class="drop-nav"> Mens
<ul>
<li> jumpers </li>
<li> t shirts </li>
</ul>
</li>
<li class="drop-nav"> Womens
<ul>
<li> hoodies </li>
<li> leggings </li>
</ul>
</li>
</ul>
</li>
</ul>
$(".drop-nav").on("click", function(e){
e.preventDefault();
});
li ul{
display: none;
}
You could use $(this).find('ul').eq(0) to get the ul, but I would delegate the changing of the display to the stylesheet, but use javascript to add a class where applicable. This will give you many more options for the design of your dropdown later.
$(".drop-nav").on("click", function(e) {
e.preventDefault()
// don't allow the event to fire horizontally or vertically up the tree
e.stopImmediatePropagation()
// switch the active class that you can use to display the child
$(this).toggleClass('active')
})
/* don't target ll list items in you page, be more specific */
.drop-nav > ul {
display: none;
}
.drop-nav.active > ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Profile</li>
<li>Edit</li>
<li class="drop-nav"> See your products
<ul>
<li class="drop-nav"> Mens
<ul>
<li> jumpers </li>
<li> t shirts </li>
</ul>
</li>
<li class="drop-nav"> Womens
<ul>
<li> hoodies </li>
<li> leggings </li>
</ul>
</li>
</ul>
</li>
</ul>
I would add more descriptive class names in your markup, and make them easier to target with CSS and jQuery.
To toggle the menus you could do something like the following:
$(".dropdown-trigger1").on("click", function() {
// Toggle the first menu
$(".dropdown-one").toggleClass("open");
// Close the submenus
$(".dropdown-two").removeClass("open");
});
$(".dropdown-trigger2").on("click", function(e) {
// Prevent a click on a submenu from closing the menu
e.stopPropagation();
// Close any open submenu
$(".dropdown-two").removeClass("open");
// Open the submenu that has been clicked
$(this).find(".dropdown-two").toggleClass("open");
});
li ul {
display: none;
}
.dropdown-one.open {
display: block;
}
.dropdown-two.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Profile</li>
<li>Edit</li>
<li class="dropdown-trigger1"> See your products
<ul class="dropdown-one">
<li class="dropdown-trigger2"> Mens
<ul class="dropdown-two">
<li> jumpers </li>
<li> t shirts </li>
</ul>
</li>
<li class="dropdown-trigger2"> Womens
<ul class="dropdown-two">
<li> hoodies </li>
<li> leggings </li>
</ul>
</li>
</ul>
</li>
</ul>
You haven't described about how you activate each sub-menu, so I will describe solution little bit abstractly. Solution is based on your HTML structure an will work if you wouldn't change it.
$('.drop-nav a').on('click', function() {
// This next method returns next element in DOM that is after clicked a link.
// Based on your HTML it would be ul that holds your sub-menu.
var subMenu = $(this).next();
// Here using subMenu selector to make something with sub-menu...
// Example: adding CSS inline to sub. In your situation it may be something else...
$(subMenu).css({ 'display' : 'block' });
});

Function click on li element

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/

Disable the opening of submenu in jquery menu on hover

I am using jquery menu in my application.I have 3 levels of submenu.
Like the one shown in the jsfiddle below.
http://jsfiddle.net/ankitap/WC3bE/
When we do mouse hover on the menu options,the submenu will open automatically.
I want to disable this feature and want to open the submenu only on click.
i tried to use:
$( "#menu a" ).menu({ role: null });
I have also tried to give level 1 class name as mainclass and level 2 class name as subclass.
<script>
$("#menu").menu();
$("#menu a").click(function() {
console.log($(this).text()); // gets text contents of clicked li
$(".subclass a").show();
});
$("#menu a").click(function() {
$(".subclass a").hide();
});
</script>
the html code for this is:
<ul id="menu" class="mainclass">
<li>Aberdeen</li>
<li>Ada</li>
<li>Adamsville</li>
<li>Addyston</li>
<li>
Delphi
<ul class="subclass">
<li >
Ada
<ul>
<li>
ankita
</li>
</ul>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Saarland</li>
<li>
Salzburg
<ul class="subclass">
<li>
Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>
Delphi
<ul>
<li>Ada</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
<li>Perch</li>
</ul>
</li>
<li>Amesville</li>
</ul>
I could not stop the opening of submenu on mouse hover.
I want the submenu to open only after click.Please help!
Thank you.
no js/jquery guru but maybe unbind mouseenter and mouseleave events
$("#menu").menu(/*{
select: function( event, ui ) {
var selection = ui.item.text();
var get=this.event;
console.log(get);
}}*/);
$('#menu').unbind('mouseenter mouseleave');
$("#menu a").click(function() {
console.log($(this).text());
});
note the $('#menu').unbind('mouseenter mouseleave'); statement

How do I slide/open specific menu item using javascript / jquery on page load?

I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load?
I'm using this:
<!-- menu -->
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a>About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a>Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
<!-- menu end -->
and my javascript on click is this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
but my quest is: how do I open specific item(s) on page load? How do I open menu item 2 for example ("about"), or menu utem 3 ("projects"), etc...?
quite easy actually;
$('#menu li a:eq(1)').trigger('click'); //open "about"
$('#menu li a:eq(2)').trigger('click'); //open "projects"
hope I helped
Put an id to your a tags like
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a id="about">About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a id="projects">Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
and then pass an id of your choice to your function like
// Pay attention to pass id to function
function initMenu(id)
{
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
});
// Add following lines
if (typeof(id) != 'undefined')
{
$('#'+id).click();
}
}
$(document).ready(function() {initMenu('projects');});
Then to change you can use instead
$(document).ready(function() {initMenu('about');});

Categories