how to remove all class from child node using pure javascript? - javascript

[![enter image description here][1]][1]
it have ul li structure menu.
i want remove all menushow class from submenu_1.
i have multiple submenu_1 class.
demo example :
<ul class="submenu_1 menushow">
<li class="sub">
<ul class="submenu_2 menushow">
<li>
<ul class="submenu_2 menushow">
<li>
<ul class="submenu_2 menushow">
<li></li>
</ul>
</li>
</ul>
</li>
<li></li>
</ul>
</li></ul>


To remove all class .menushow from elements from ul.submenu_1.menushow you can use el.classList.remove('menushow'):
document
.querySelectorAll('ul.submenu_1.menushow, ul.submenu_1 .menushow')
.forEach(function(el) {
el.classList.remove('menushow');
})
<ul class="submenu_1 menushow">
<li class="sub">
<ul class="submenu_2 menushow">
<li>
<ul class="submenu_2 menushow">
<li>
<ul class="submenu_2 menushow">
<li></li>
</ul>
</li>
</ul>
</li>
<li></li>
</ul>
</li>
</ul>

Related

How to recursively add id tag using jQuery to ul & li elements, according to their depth within the list?

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>

Add class to ancestor element based on existence of element in the hierarchy

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');

Expand programmatically unwrongest accordion

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.

jQuery switching lists with same class

I created a bit complex list and I wish after clicking on element with class ".recipes", display it inside paragraph but after clicking on button prev or next, I wish to switch to previous or next element with same class name. I know already how to switch the list if they are next to each other but after putting them inside different parents it seems more complicated:
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>
To show clicked element:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
and to show previous element with class "recipes" I got from another person on this forum is here however because classes have different parents now, it doesn't work, I thought that i can add more parents() and because of that find previous or next ".recipes" but it didn't work out:
$(".prev").click(function() {
var isFirst = $(".recipies.active").is(":first-child");
if(isFirst){
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").prev().trigger("click");
}
});

Check this out:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
$(".prev").click(function() {
var isFirst = $(".recipies.active").text() == $($(".recipies").get(0)).text();
if (isFirst) {
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").parent().parent().prev().find(".recipies").trigger("click");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>

jquery mtree onload open last clicked node with cookie option

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>

Categories

Resources