jquery mtree onload open last clicked node with cookie option - javascript

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>

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.

Parent collapses when expanding child using toggle and page scrolls to top

I asked two questions related to my current problem, but the way I asked and the code that I provided wasn't been enough to solve it, so I present the problem (that was raised from the previous solutions attempts) in a more complete way on this code snippet.
Basically I want this PHP generated file tree to expand/collapse the way it should. With the JQuery code that some nice people here at SO provided me it's almost solved.
The problem is now that when you expand a child the parent collapses, you will see this running the code below.
Notes:
-I'm using Wordpress and for some reason you need to make sure that the tree is collapsed at first, otherwise it's displayed fully expanded.
-I have a related side problem: When you click to toggle, the scroll goes all the way up.
function init_php_file_tree() {
$('.pft-directory')
.on('click', function() {
$(this).children('ul').toggle();
})
.children("ul").hide();
};
jQuery(init_php_file_tree);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="file">
<ul>
<li class="pft-directory">Parent Directory
<ul>
<li class="pft-directory">Child directory
<ul>
<li class="pft-file ext-pdf">somefile.pdf
<ul></ul> <!-- this HTML code is generated from a php recursive function you will see it a lot (I'll fix that later) -->
</li>
<li class="pft-file ext-doc">somefile2.doc
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory">Another parent directory
<ul>
<li class="pft-directory">Child directory
<ul>
<li class="pft-file ext-docx">V1.docx
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory">Child directory 2
<ul>
<li class="pft-file ext-pdf">V2.pdf
<ul></ul>
</li>
<li class="pft-file ext-png">HH-V1.png
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory">Child directory
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory">Child directory 2
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory">Child directory 3
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory">Child directory 4
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>

You can stop the bubbling that occurs by using event.stopPropagation() (https://api.jquery.com/event.stoppropagation/).
Regarding your second problem, that the page scrolls up, that is very likely due to your a href="#"'s. Replace them with url's or use a href="javascript:;".
Example below:
function init_php_file_tree() {
$('.pft-directory')
.on('click', function(e) {
e.stopPropagation();
$(this).children('ul').toggle();
})
.children("ul").hide();
};
jQuery(init_php_file_tree);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="file">
<ul>
<li class="pft-directory">Parent Directory
<ul>
<li class="pft-directory">Child directory
<ul>
<li class="pft-file ext-pdf">somefile.pdf
<ul></ul> <!-- this HTML code is generated from a php recursive function you will see it a lot (I'll fix that later) -->
</li>
<li class="pft-file ext-doc">somefile2.doc
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory">Another parent directory
<ul>
<li class="pft-directory">Child directory
<ul>
<li class="pft-file ext-docx">V1.docx
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory">Child directory 2
<ul>
<li class="pft-file ext-pdf">V2.pdf
<ul></ul>
</li>
<li class="pft-file ext-png">HH-V1.png
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory">Child directory
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory">Child directory 2
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory">Child directory 3
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory">Child directory 4
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>

The reason is when you are clicking on child node it's click event is pass to it's parent node so you have to stop that passing. and for doing so you have to use stopPropagation() which will not pass event to it's parent element. For more info on stopPropagation() see this
function init_php_file_tree() {
$('.pft-directory')
.on('click', function(e) {
$(this).children('ul').toggle();
e.stopPropagation();
})
.children("ul").hide();;
};
jQuery(init_php_file_tree);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="file">
<ul>
<li class="pft-directory">Parent Directory
<ul>
<li class="pft-directory">Child directory
<ul>
<li class="pft-file ext-pdf">somefile.pdf
<ul></ul> <!-- this HTML code is generated from a php recursive function you will see it a lot (I'll fix that later) -->
</li>
<li class="pft-file ext-doc">somefile2.doc
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory">Another parent directory
<ul>
<li class="pft-directory">Child directory
<ul>
<li class="pft-file ext-docx">V1.docx
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory">Child directory 2
<ul>
<li class="pft-file ext-pdf">V2.pdf
<ul></ul>
</li>
<li class="pft-file ext-png">HH-V1.png
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory">Child directory
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory">Child directory 2
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory">Child directory 3
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory">Child directory 4
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>

how to remove all class from child node using pure 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>

Categories

Resources