I'm trying to expand programmatically an accordion menu based on saved values in local-storage.
The problem is that it saves the values, i get back the values, but it's not expanding the active ones.
I use the following accordion library:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul, li>div'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
$(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
$(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
My HTML (i generate the menu from C#) + JS: Init that gets the menus/submenus that i clicked earlier (but not expanding them :o( ):
<!--MENU-->
<div id="pageWrap" class="pageWrap">
<div class="pageContent">
<ul class="accordion">
<div id="menucontent">
<li id="top1">ACCESORII
<ul>
<li id="mid11">ACCESORII PENTRU LANTERNE
<ul>
<li id="sub111"><a href='category.aspx?id=72'>accesorii pentru lanterne portabile</a>
</li>
</ul>
<ul>
<li id="sub112"><a href='category.aspx?id=77'>accesorii pentru lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid12">BECURI DE REZERVA
<ul>
<li id="sub121"><a href='category.aspx?id=67'>becuri de rezerva ambalate individual</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid13">PENTRU CALATORII
<ul>
<li id="sub131"><a href='category.aspx?id=75'>accesorii pentru calatorii</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid14">PENTRU CALCULATOARE, JOCURI SI MUZICA
<ul>
<li id="sub141"><a href='category.aspx?id=79'>pentru calculatoare, jocuri si muzica</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top2">ACUMULATORI
<ul>
<li id="mid21">ACUMULATORI CU TEHNOLOGIA maxE (fara auto-descarcare)
<ul>
<li id="sub211"><a href='category.aspx?id=80'>MARIMEA R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub212"><a href='category.aspx?id=81'>MARIMEA R6 (AA)</a>
</li>
</ul>
<ul>
<li id="sub213"><a href='category.aspx?id=82'>MARIMEA R14 (C)</a>
</li>
</ul>
<ul>
<li id="sub214"><a href='category.aspx?id=83'>MARIMEA R20 (D)</a>
</li>
</ul>
<ul>
<li id="sub215"><a href='category.aspx?id=84'>ACUMULATORI DE 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid22">ACUMULATORI NiMH
<ul>
<li id="sub221"><a href='category.aspx?id=12'>ACUMULATORI MARIMEA R3 (Micro AAA)</a>
</li>
</ul>
<ul>
<li id="sub222"><a href='category.aspx?id=13'>ACUMULATORI MARIMEA R6 (Mignon AA)</a>
</li>
</ul>
<ul>
<li id="sub223"><a href='category.aspx?id=14'>ACUMULATORI MARIMEA R14 (Baby C)</a>
</li>
</ul>
<ul>
<li id="sub224"><a href='category.aspx?id=15'>ACUMULATORI MARIMEA R20 (Mono D)</a>
</li>
</ul>
<ul>
<li id="sub225"><a href='category.aspx?id=16'>ACUMULATORI MARIMEA 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid23">ACUMULATORI PENTRU TELEFOANE DECT
<ul>
<li id="sub231"><a href='category.aspx?id=85'>Marimea R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub232"><a href='category.aspx?id=86'>Marimea R6 (AA)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid24">AUMULATORI Ni-Zn
<ul>
<li id="sub241"><a href='category.aspx?id=96'>ACUMULATORI Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid25">EXTERN
<ul>
<li id="sub251"><a href='category.aspx?id=89'>PowerBank</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid26">HyCell
<ul>
<li id="sub261"><a href='category.aspx?id=91'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid27">PLUMB-GEL RITAR
<ul>
<li id="sub271"><a href='category.aspx?id=98'>ACUMULATOR PLUMB-GEL RITAR</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top3">BABYCARE
<ul>
<li id="mid31">ALARME BEBELUSI (BABYPHONE)
<ul>
<li id="sub311"><a href='category.aspx?id=54'>BABYPHONE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid32">LAMPI DE VEGHE SI LAMPI IN FORMA DE JUCARII
<ul>
<li id="sub321"><a href='category.aspx?id=55'>lampi de veghe si lampi in forma de jucarii</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top4">BATERII
<ul>
<li id="mid41">BATERII ALCALINE
<ul>
<li id="sub411"><a href='category.aspx?id=4'>• BATERII RED LINE</a>
</li>
</ul>
<ul>
<li id="sub412"><a href='category.aspx?id=5'>• BATERII X-POWER</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid42">BATERII BUTON
<ul>
<li id="sub421"><a href='category.aspx?id=6'>• BATERII BUTON ALCALINE</a>
</li>
</ul>
<ul>
<li id="sub422"><a href='category.aspx?id=7'>• BATERII BUTON LITIU</a>
</li>
</ul>
<ul>
<li id="sub423"><a href='category.aspx?id=8'>• BATERII AUDITIVE ZINC AIR</a>
</li>
</ul>
<ul>
<li id="sub424"><a href='category.aspx?id=92'>SET BATERII BUTON HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid43">BATERII LITIU DE MARIMI STANDARD
<ul>
<li id="sub431"><a href='category.aspx?id=58'>• BATERII LITIU in blistere</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid44">BATERII LITIU PHOTO
<ul>
<li id="sub441"><a href='category.aspx?id=59'>• BATERI LITIU pentru aplicatii foto</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid45">BATERII SILVER OXID
<ul>
<li id="sub451"><a href='category.aspx?id=93'>BATERII BUTON SILVER OXID</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid46">TESTERE BATERII SI ACCESORII
<ul>
<li id="sub461"><a href='category.aspx?id=9'>• TESTERE BATERII SI ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top5">INCARCATOARE
<ul>
<li id="mid51">GAMA HyCell
<ul>
<li id="sub511"><a href='category.aspx?id=90'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid52">INCARCATOARE CU ACUMULATORI
<ul>
<li id="sub521"><a href='category.aspx?id=42'>INCARCATOARE CU ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid53">INCARCATOARE CU MICROPROCESOR
<ul>
<li id="sub531"><a href='category.aspx?id=44'>SERIA POWERLINE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid54">INCARCATOARE FARA ACUMULATORI
<ul>
<li id="sub541"><a href='category.aspx?id=94'>INCARCATORI FARA ACUMULATOR</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid55">INCARCATOARE HIGH-TECH CU FUNCTIE DE REIMPROSPATARE
<ul>
<li id="sub551"><a href='category.aspx?id=45'>seria Energy</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid56">INCARCATOARE MULTIMEDIA
<ul>
<li id="sub561"><a href='category.aspx?id=48'>incarcator pentru acumulatori Lithiu-Ion</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid57">INCARCATOARE Ni-Zn
<ul>
<li id="sub571"><a href='category.aspx?id=97'>INCARCATOARE Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid58">INCARCATOARE PENTRU ACUMULATORI PB-GEL SI ACUMULATORI AUTO
<ul>
<li id="sub581"><a href='category.aspx?id=49'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IU</a>
</li>
</ul>
<ul>
<li id="sub582"><a href='category.aspx?id=50'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IUoU</a>
</li>
</ul>
<ul>
<li id="sub583"><a href='category.aspx?id=51'>incarcatoare pentru baterii auto cu plumb sau plumb-gel</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid59">INCARCATOARE RAPIDE
<ul>
<li id="sub591"><a href='category.aspx?id=47'>cu microprocesor pentru pachete de acumlatori</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid510">INCARCATOARE STANDARD
<ul>
<li id="sub5101"><a href='category.aspx?id=41'>BASIC</a>
</li>
</ul>
<ul>
<li id="sub5102"><a href='category.aspx?id=46'>pentru acumulatori NiCd/NiMH</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid511">INCARCATOARE ULTRARAPIDE
<ul>
<li id="sub5111"><a href='category.aspx?id=43'>ULTRARAPIDE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid512">SERIA GLOBAL LINE
<ul>
<li id="sub5121"><a href='category.aspx?id=60'>seria Global line</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid513">SURSE DE ALIMENTARE
<ul>
<li id="sub5131"><a href='category.aspx?id=52'>surse de alimentare universale</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top6">LANTERNE
<ul>
<li id="mid61">INDICATOR
<ul>
<li id="sub611"><a href='category.aspx?id=71'>indicator cu lanterna</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid62">LANTERNE ANTI-EX
<ul>
<li id="sub621"><a href='category.aspx?id=61'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid63">LANTERNE CU CARCASA METALICA
<ul>
<li id="sub631"><a href='category.aspx?id=63'>cu carcasa metalica</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid64">LANTERNE DE FRUNTE
<ul>
<li id="sub641"><a href='category.aspx?id=57'>lanterne de frunte</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid65">LANTERNE DE LUCRU
<ul>
<li id="sub651"><a href='category.aspx?id=95'>LANTERNE DE LUCRU</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid66">LANTERNE HOME DECORATION
<ul>
<li id="sub661"><a href='category.aspx?id=69'>lanterne Lifestyle</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid67">LANTERNE INDUSTRIALE
<ul>
<li id="sub671"><a href='category.aspx?id=78'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid68">LANTERNE LASER
<ul>
<li id="sub681"><a href='category.aspx?id=70'>lanterne laser (Laserpointer)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid69">LANTERNE PORTABILE REINCARCABILE
<ul>
<li id="sub691"><a href='category.aspx?id=65'>lanterne portabile reincarcabile (AS, ASN)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid610">LANTERNE REINCARCABILE
<ul>
<li id="sub6101"><a href='category.aspx?id=66'>lanterne reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid611">LANTERNE SERIA AGENT
<ul>
<li id="sub6111"><a href='category.aspx?id=56'>seria AGENT</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid612">LANTERNE TIP BRELOC
<ul>
<li id="sub6121"><a href='category.aspx?id=64'>tip breloc</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top7">TEHNOLOGIA ZERO WATT
<ul>
<li id="mid71">PRIZE ECOMOMICE ZERO WATT
<ul>
<li id="sub711"><a href='category.aspx?id=53'>seria AES</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
<script src="js/jquery.accordion.source.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
$('ul').accordion();
});
// ]]>
</script>
<script>
/*Main Left Menu Begin*/
var topActiveid = "";
var level1Activeid = "";
var level2Activeid = "";
$(document).ready(function() {
if (localStorage.getItem("activeLeftMenu") != null)
{
var strarray = localStorage.getItem("activeLeftMenu").split("/");
topActiveid = strarray[0].toString();
level1Activeid = strarray[1].toString();
level2Activeid = strarray[2].toString();
$(".accordion>ul>li.active").removeClass("active");
//if ($("#"+topActiveid) =! null)
$("#"+topActiveid).addClass('active');
$("#"+topActiveid).click();
$("#"+topActiveid).slideDown();
//if ($("#"+level1Activeid) =! null)
$("#"+level1Activeid).addClass('active');
$("#"+level1Activeid).click();
$("#"+level1Activeid).slideDown();
//if ($("#"+level2Activeid) =! null)
$("#"+level2Activeid).addClass('active');//$('#topx3').addClass('active'):
$("#"+level2Activeid).click();
$("#"+level2Activeid).slideDown();
// $('#menu li.active').show();
// $('#menu li.active').slideDown('normal');
}
});
</script>
<!--MENU-->
I tried to use click() , slidedown() , show() to expand, but none of them are working. It's just selecting the top level, without expanding (see screenshot / i also attached the link).
img: Not expanding menu - screenshot
link: Website
You have to call the .click() on the a element which handles the click.
Then it is working fine.
Eg.
$('#top6 > a').click()
Or in your code:
$("#"+topActiveid + " > a").click();
The logic to add / remove the active class and also the slidedown() call are not necessary.
Related
How to give unique id attributes and reflect the same within all ul li elements according to their depth/level within the parent list.
first ul should have id="u1"
first li within that ul should have id="u1l1"
next li within that ul should have id="u1l2"
next li within that ul should have id="u1l3"
ul within that should have id="u1l3-u1"
next ul within that should have id="u1l3-u2"
li within that should have id="u1l3-u2l1"
next li should have id="u1l3-u2l2"
and so on...
To make things clearer, here's a sample code that I generated using a spreadsheet program...
For example the following code:
<div id="listz">
<ul>
<li><span>Colors</span>
<ul>
<li><span>Primary Colors</span>
<ul>
<li>Yellow</li>
<li><span>Red</span>
<ul>
<li>Red</li>
<li>Fire Brick</li>
<li><span>Salmon</span>
<ul>
<li>Dark Salmon</li>
<li>Light Salmon</li>
<li>Salmon</li>
</ul>
</li>
<li>Coral</li>
<li>Crimson</li>
</ul>
</li>
<li>Blue</li>
</ul>
<li><span>Secondary Colors</span>
<ul>
<li>Orange</li>
<li>Green</li>
<li>Purple</li>
</ul>
</li>
<li><span>Earth Colors</span>
<ul>
<li>White</li>
<li>Black</li>
<li>Gray</li>
</ul>
</li>
</ul>
</li>
<li><span>Stationary</span>
<ul>
<li>Books
<ul>
<li>Ruled Books</li>
<li>Unruled Books</li>
<li><span>Graph Books</span>
<ul>
<li>Cartesian Graphs</li>
<li>Isometric Graphs</li>
<li>Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li><span>Pens</span>
<ul>
<li>Ball Pens</li>
<li>Fountain Pens</li>
</ul>
</li>
<li>Eraser</li>
<li>Paper Weight</li>
</ul>
</li>
<li>Furniture</li>
<li>foo</li>
<li>bar</li>
<li>foo fighters</li>
</ul>
should become:
<div id="listz">
<ul id="u1">
<li id="u1l1"><span>Stationary</span>
<ul id="u1l1-u1">
<li id="u1l1-u1l1">Books
<ul id="u1l1-u1l1-u1">
<li id="u1l1-u1l1-u1l1">Ruled Books</li>
<li id="u1l1-u1l1-u1l2">Unruled Books</li>
<li id="u1l1-u1l1-u1l3"><span>Graph Books</span>
<ul id="u1l1-u1l1-u1l3-u1">
<li id="u1l1-u1l1-u1l3-u1l1">Cartesian Graphs</li>
<li id="u1l1-u1l1-u1l3-u1l2">Isometric Graphs</li>
<li id="u1l1-u1l1-u1l3-u1l3">Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li id="u1l1-u1l2"><span>Pens</span>
<ul id="u1l1-u1l2-u1">
<li id="u1l1-u1l2-u1l1">Ball Pens</li>
<li id="u1l1-u1l2-u1l2">Fountain Pens</li>
</ul>
</li>
<li id="u1l1-u1l3">Eraser</li>
<li id="u1l1-u1l4">Paper Weight</li>
</ul>
</li>
<li id="u1l2">Furniture</li>
<li id="u1l3"><span>Colors</span>
<ul id="u1l3-u1">
<li id="u1l3-u1l1"><span>Primary Colors</span>
<ul id="u1l3-u1l1-u1">
<li id="u1l3-u1l1-u1l1">Yellow</li>
<li id="u1l3-u1l1-u1l2"><span>Red</span>
<ul id="u1l3-u1l1-u1l2-u1">
<li id="u1l3-u1l1-u1l2-u1l1">Red</li>
<li id="u1l3-u1l1-u1l2-u1l2">Fire Brick</li>
<li id="u1l3-u1l1-u1l2-u1l3"><span>Salmon</span>
<ul id="u1l3-u1l1-u1l2-u1l3-u1">
<li id="u1l3-u1l1-u1l2-u1l3-u1l1">Dark Salmon</li>
<li id="u1l3-u1l1-u1l2-u1l3-u1l2">Light Salmon</li>
<li id="u1l3-u1l1-u1l2-u1l3-u1l3">Salmon</li>
</ul>
</li>
<li id="u1l3-u1l1-u1l2-u1l4">Coral</li>
<li id="u1l3-u1l1-u1l2-u1l5">Crimson</li>
</ul>
</li>
<li id="u1l3-u1l1-u1l3">Blue</li>
</ul>
<li id="u1l3-u1l2"><span>Secondary Colors</span>
<ul id="u1l3-u1l2-u1">
<li id="u1l3-u1l2-u1l1">Orange</li>
<li id="u1l3-u1l2-u1l2">Green</li>
<li id="u1l3-u1l2-u1l3">Purple</li>
</ul>
</li>
<li id="u1l3-u1l3"><span>Earth Colors</span>
<ul id="u1l3-u1l3-u1">
<li id="u1l3-u1l3-u1l1">White</li>
<li id="u1l3-u1l3-u1l2">Black</li>
<li id="u1l3-u1l3-u1l3">Gray</li>
</ul>
</li>
</ul>
</li>
<li id="u1l4">foo</li>
<li id="u1l3">bar</li>
<li>foo fighters</li>
Here's what I've tried:
$("ul").each(function (i)
{
$(this).attr("id","u"+(i+1));
$(this).prepend("<span>u"+(i+1)+"</span>");
$("li", this).each(function (j)
{
$(this).attr("id","l"+(j+1));
$(this).prepend("<span>l"+(j+1)+"</span>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listz">
<ul>
<li><span>Colors</span>
<ul>
<li><span>Primary Colors</span>
<ul>
<li>Yellow</li>
<li><span>Red</span>
<ul>
<li>Red</li>
<li>Fire Brick</li>
<li><span>Salmon</span>
<ul>
<li>Dark Salmon</li>
<li>Light Salmon</li>
<li>Salmon</li>
</ul>
</li>
<li>Coral</li>
<li>Crimson</li>
</ul>
</li>
<li>Blue</li>
</ul>
<li><span>Secondary Colors</span>
<ul>
<li>Orange</li>
<li>Green</li>
<li>Purple</li>
</ul>
</li>
<li><span>Earth Colors</span>
<ul>
<li>White</li>
<li>Black</li>
<li>Gray</li>
</ul>
</li>
</ul>
</li>
<li><span>Stationary</span>
<ul>
<li>Books
<ul>
<li>Ruled Books</li>
<li>Unruled Books</li>
<li><span>Graph Books</span>
<ul>
<li>Cartesian Graphs</li>
<li>Isometric Graphs</li>
<li>Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li><span>Pens</span>
<ul>
<li>Ball Pens</li>
<li>Fountain Pens</li>
</ul>
</li>
<li>Eraser</li>
<li>Paper Weight</li>
</ul>
</li>
<li>Furniture</li>
<li>foo</li>
<li>bar</li>
<li>foo fighters</li>
</ul>
</div>
You can try this function
addIdPartial('', $('#listz'));
function addIdPartial(id, li) {
if ($(li).find('> ul > li').length) {
$(li).find('> ul > li').each(function(i, v) {
pid = id + '-u1'
if(id == '') pid = 'u1';
$(this).parent().attr('id', pid);
var lid = pid + 'l' + (i+1);
$(this).attr('id', lid);
addIdPartial(lid, this);
})
}
}
ul:before, li:before {
content: attr(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listz">
<ul>
<li><span>Colors</span>
<ul>
<li><span>Primary Colors</span>
<ul>
<li>Yellow</li>
<li><span>Red</span>
<ul>
<li>Red</li>
<li>Fire Brick</li>
<li><span>Salmon</span>
<ul>
<li>Dark Salmon</li>
<li>Light Salmon</li>
<li>Salmon</li>
</ul>
</li>
<li>Coral</li>
<li>Crimson</li>
</ul>
</li>
<li>Blue</li>
</ul>
<li><span>Secondary Colors</span>
<ul>
<li>Orange</li>
<li>Green</li>
<li>Purple</li>
</ul>
</li>
<li><span>Earth Colors</span>
<ul>
<li>White</li>
<li>Black</li>
<li>Gray</li>
</ul>
</li>
</ul>
</li>
<li><span>Stationary</span>
<ul>
<li>Books
<ul>
<li>Ruled Books</li>
<li>Unruled Books</li>
<li><span>Graph Books</span>
<ul>
<li>Cartesian Graphs</li>
<li>Isometric Graphs</li>
<li>Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li><span>Pens</span>
<ul>
<li>Ball Pens</li>
<li>Fountain Pens</li>
</ul>
</li>
<li>Eraser</li>
<li>Paper Weight</li>
</ul>
</li>
<li>Furniture</li>
<li>foo</li>
<li>bar</li>
<li>foo fighters</li>
</ul>
</div>
I have a sample code below
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
If one of the li has a class active how can I also add a class active on the parent li or this part
<li class="treeview">
You can use jquery to achieve this. Please find the snippet below.
$('.treeview-menu li').on('click', function() {
$(this).addClass('active');
$(this).closest('li.treeview').addClass('active');
})
.active>a {
color: green;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul>
If you need the entire treeview ancestry of an active <li> to have the class .active, you can use jQuery's :has:
$('.treeview:has(li.active)').addClass('active');
$('.treeview:has(li.active)').addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you need only the immediately closest treeview, you can use .closest():
$('.treeview li.active').closest(".treeview").addClass('active');
$('.treeview li.active').closest(".treeview").addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4 (Active)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You don't want to select any li.active outside of the .treeview tree hierarchy:
$('.treeview li.active').closest('.treeview').addClass('active');
Trying to make it so that the navigation links with children toggle open before you are taken to that page. Right now, code below only goes straight to page even if the parent has children. Thoughts?
UPDATED SOLUTION (jQuery):
jQuery(window).on('resize', function () {
jQuery('.main-navigation ul li a').toggleClass('toggleClass', jQuery(window).width() < 991);
}).trigger('resize')
jQuery('.main-navigation li a.toggleClass').click(function(e){
var cl = jQuery(this).data('push');
if(!cl){
e.preventDefault();
jQuery(this).next('ul').slideToggle();
jQuery(this).data('push',true)
}
});
UPDATED SOLUTION (CSS):
.main-navigation li ul {
display:none;
}
Here's the HTML:
<nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
<ul>
<li title="Home">
Home
</li>
<li class="dropdown-1" title="Rentals">
Rentals
<ul class="level2">
<li title="Chico">
Chico
<ul class="level3">
<li title="Campbell Commons">
Campbell Commons
</li>
<li title="East of Eaton">
East of Eaton
</li>
<li title="La Vista Verde">
La Vista Verde
</li>
<li title="Longfellow Apartments">
Longfellow Apartments
</li>
<li title="Lucian Manor Senior Apartments">
Lucian Manor Senior Apartments
</li>
<li title="Murphy Commons">
Murphy Commons
</li>
<li title="North Point Apartments">
North Point Apartments
</li>
</ul>
</li>
<li title="Gridley">
Gridley
<ul class="level3">
<li title="Hazel Hotel">
Hazel Hotel
</li>
</ul>
</li>
<li title="Hamilton City">
Hamilton City
<ul class="level3">
<li title="Las Palmas Apartments">
Las Palmas Apartments
</li>
<li title="Shotover Inn Apartments">
Shotover Inn Apartments
</li>
</ul>
</li>
<li title="Live Oak">
Live Oak
<ul class="level3">
<li title="Maple Park Apartments, Phase 1">
Maple Park Apartments, Phase 1
</li>
<li title="Maple Park Senior Apartments">
Maple Park Senior Apartments
</li>
</ul>
</li>
<li title="Marysville">
Marysville
<ul class="level3">
<li title="Marymead Park">
Marymead Park
</li>
</ul>
</li>
<li title="Orland">
Orland
<ul class="level3">
<li title="Rancho de Soto Apartments">
Rancho de Soto Apartments
</li>
</ul>
</li>
<li title="Paradise">
Paradise
<ul class="level3">
<li title="Paradise Community Village">
Paradise Community Village
</li>
</ul>
</li>
<li title="Red Bluff">
Red Bluff
<ul class="level3">
<li title="Brickyard Creek Apartments">
Brickyard Creek Apartments
</li>
</ul>
</li>
<li title="Redding">
Redding
<ul class="level3">
<li title="Linden Apartments">
Linden Apartments
</li>
</ul>
</li>
</ul>
</li>
<li title="News">
News
</li>
<li class="dropdown-1" title="Home Ownership">
Home Ownership
<ul class="level2">
<li title="Active Developments">
Active Developments
<ul class="level3">
<li title="Biggs Estates">
Biggs Estates
</li>
<li title="Calle Vista">
Calle Vista
</li>
<li title="Villa La Michele III">
Villa La Michele III
</li>
<li title="Sierra Vista">
Sierra Vista
</li>
<li title="Sierra Vista 2">
Sierra Vista 2
</li>
<li title="Siskiyou Grove">
Siskiyou Grove
</li>
</ul>
</li>
<li title="Past Developments">
Past Developments
</li>
<li title="How to Bid on CHIP Projects">
How to Bid on CHIP Projects
</li>
<li title="Homebuyer Education">
Homebuyer Education
</li>
</ul>
</li>
<li title="Jobs">
Jobs
</li>
<li title="About Us">
About Us
<ul class="level2">
<li title="Leadership">
Leadership
</li>
</ul>
</li>
</ul>
</nav>
If you don't want to lose the gotolink behavior using preventDefaultone way is to control the button like:
On first click toggle the submenu
On second click go to the link
$('.main-navigation li a').click(function(e){
var cl = $(this).data('push');
if(!cl){
e.preventDefault();
$(this).next('ul').slideToggle();
$(this).data('push',true)
}
});
li ul {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
<ul>
<li class="dropdown-1" title="Rentals">
Rentals
<ul class="level2">
<li title="Chico">
Chico
<ul class="level3">
<li title="Campbell Commons">
Campbell Commons
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
You need to prevent default behavior of the click on <a>. Something like this.
$('.main-navigation li a').click(function(e){
e.preventDefault(); //e is click event
$(this).next('ul').slideToggle();
return false; //just in case
});
You need to hide those li level . I see li level1,level2 so we need to hide them first. and jQuery you just forget to add e.preventDefault() function which stops the default action of an element from happening.So that the 2 mistake nothing else. Now you can use your code to. with your jQueryLiveFiddle. In here I just use toggle .
$(document).ready(function() {
$('ul li a').click(function(e) {
$(this).next('ul').toggle('blind');;
e.preventDefault();
})
});
.level2,
.level3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
<ul>
<li title="Home">
Home
</li>
<li class="dropdown-1" title="Rentals">
Rentals
<ul class="level2">
<li title="Chico">
Chico
<ul class="level3">
<li title="Campbell Commons">
Campbell Commons
</li>
<li title="East of Eaton">
East of Eaton
</li>
<li title="La Vista Verde">
La Vista Verde
</li>
<li title="Longfellow Apartments">
Longfellow Apartments
</li>
<li title="Lucian Manor Senior Apartments">
Lucian Manor Senior Apartments
</li>
<li title="Murphy Commons">
Murphy Commons
</li>
<li title="North Point Apartments">
North Point Apartments
</li>
</ul>
</li>
<li title="Gridley">
Gridley
<ul class="level3">
<li title="Hazel Hotel">
Hazel Hotel
</li>
</ul>
</li>
<li title="Hamilton City">
Hamilton City
<ul class="level3">
<li title="Las Palmas Apartments">
Las Palmas Apartments
</li>
<li title="Shotover Inn Apartments">
Shotover Inn Apartments
</li>
</ul>
</li>
<li title="Live Oak">
Live Oak
<ul class="level3">
<li title="Maple Park Apartments, Phase 1">
Maple Park Apartments, Phase 1
</li>
<li title="Maple Park Senior Apartments">
Maple Park Senior Apartments
</li>
</ul>
</li>
<li title="Marysville">
Marysville
<ul class="level3">
<li title="Marymead Park">
Marymead Park
</li>
</ul>
</li>
<li title="Orland">
Orland
<ul class="level3">
<li title="Rancho de Soto Apartments">
Rancho de Soto Apartments
</li>
</ul>
</li>
<li title="Paradise">
Paradise
<ul class="level3">
<li title="Paradise Community Village">
Paradise Community Village
</li>
</ul>
</li>
<li title="Red Bluff">
Red Bluff
<ul class="level3">
<li title="Brickyard Creek Apartments">
Brickyard Creek Apartments
</li>
</ul>
</li>
<li title="Redding">
Redding
<ul class="level3">
<li title="Linden Apartments">
Linden Apartments
</li>
</ul>
</li>
</ul>
</li>
<li title="News">
News
</li>
<li class="dropdown-1" title="Home Ownership">
Home Ownership
<ul class="level2">
<li title="Active Developments">
Active Developments
<ul class="level3">
<li title="Biggs Estates">
Biggs Estates
</li>
<li title="Calle Vista">
Calle Vista
</li>
<li title="Villa La Michele III">
Villa La Michele III
</li>
<li title="Sierra Vista">
Sierra Vista
</li>
<li title="Sierra Vista 2">
Sierra Vista 2
</li>
<li title="Siskiyou Grove">
Siskiyou Grove
</li>
</ul>
</li>
<li title="Past Developments">
Past Developments
</li>
<li title="How to Bid on CHIP Projects">
How to Bid on CHIP Projects
</li>
<li title="Homebuyer Education">
Homebuyer Education
</li>
</ul>
</li>
<li title="Jobs">
Jobs
</li>
<li title="About Us">
About Us
<ul class="level2">
<li title="Leadership">
Leadership
</li>
</ul>
</li>
</ul>
</nav>
I am using mtree( sample you can seehere for display my menu list nodes When i click on the node text (hyperlink) . I want to open the node which i clicked and all other nodes should be closed. I am using the following code.
In main.html page i have list with Africa,America,Asia,Europe,Oceania,Arctica and
Antarctica
Africa is having sub menu as: Algeria,Marocco,Libya,Somalia,Kenya,Mauritania and South Africa( all are hyperlink text)
when I click on kenya text hyperlink it will redirects to kenya.html page so on load of kenya.html i want Africa menu list should open with Kenya text highlighted
main.html
<body>
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul>
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS MAIN PAGE
</body>
kenya.html
<body onload="clickButton()">
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul id = "shiva">
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS Kenya PAGE
</body>
I have a menu. On hover I need to add letter-spacing style.
Menu:
<ul class="whitedropdown-menu">
<li class="disabledMenu"><a class="ng-binding">Menu 1</a></li>
<li class="disabledMenu"><a class="ng-binding">Menu 2</a></li>
<li class="activemenu"><a class="ng-binding">Menu 3</a></li>
<li class="activemenu">
<div class="icon"><i class="fa ico"></i></div>
Menu 4
</li>
</ul>
jQuery code: To detect mac chrome and function for hover
if(navigator.platform.toLowerCase().indexOf('mac') > -1 && navigator.userAgent.indexOf('Chrome') > -1)
{
$(".whitedropdown-menu > li.activemenu").hover((function() {
$(this).find("a").css("letter-spacing", "-1px");
}), function() {
$(this).find("a").css("letter-spacing", "0px");
});
}
It is not working properly. When i hover on Menu 3 It works fine. But when i hover on Menu 4, Menu 3 is getting affected. How can i resolve this?
Please Help,
Thanks
This may help , check it out :
<script>
$("#whitedropdown-menu > li.activemenu").mouseenter(function() {
$(this).find("a").css("letter-spacing", "-1px");
}).mouseleave(function() {
$(this).find("a").css("letter-spacing", "0px");
});
</script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ThisTest</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
ul{list-style-type: none}
ul ul{display: none}
ul ul ul{display: none}
</style>
<script>
$(document).ready(function(){
$("ul li").click(function(){
var myClass = $(this).attr("class");
if(typeof myClass == 'undefined'){
$(this).attr("class","active");
$(this).siblings().find("ul").css("display","none");
$(this).find("ul").css("display","block");
$(this).find("ul").find("ul").css("display","none");
event.stopImmediatePropagation();
}else{
if(myClass == 'active'){
$(this).attr("class","inactive");
$(this).siblings().find("ul").css("display","none");
$(this).find("ul").css("display","none");
$(this).find("ul").find("ul").css("display","none");
event.stopImmediatePropagation();
}else{
$(this).attr("class","active");
$(this).siblings().find("ul").css("display","none");
$(this).find("ul").css("display","block");
$(this).find("ul").find("ul").css("display","none");
event.stopImmediatePropagation();
}
}
});
});
</script>
</head>
<body>
<ul>
<li><a>India</a>
<ul>
<li><a>Sachin</a>
<ul>
<li><a>Batting</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
<li><a>Bowling</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Dravid</a>
<ul>
<li><a>Batting</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
<li><a>Bowling</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Saurav</a>
<ul>
<li><a>Batting</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
<li><a>Bowling</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
</ul></li>
</ul>
</li>
<li><a>Australia</a>
<ul>
<li><a>Ponting</a>
<ul>
<li><a>Batting</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
<li><a>Bowling</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
</ul></li>
<li><a>Steve</a>
<ul>
<li><a>Batting</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
<li><a>Bowling</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
</ul></li>
<li><a>Clarke</a></li>
</ul>
</li>
<li><a>South Africa</a>
<ul>
<li><a>Croze</a></li>
<li><a>Smith</a></li>
<li><a>Cock</a>
<ul>
<li><a>Batting</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
<li><a>Bowling</a>
<ul>
<li><a>Tests</a></li>
<li><a>ODI</a></li>
<li><a>T20</a></li>
</ul>
</li>
</ul></li>
</ul>
</li>
</ul>
</body>
</html>