How to check the continue classes in set? - javascript

I have 10 items in a list with this kind of structure where any item can have active class depending on some situations and this active class will add on item when user click on it. I want to get the number of set of 3 continue active classes. in the given example the 3 continue active classes are 2 times on items 4,5,6 and 8,9,10.
So the output should be 2 only.
How to achieve this.
I know I can get the total number of Active classes just by getting its length, but how to get if its how many times in continuity?
$(document).ready(function(){
let totalActivce = $('.active').length;
console.log(totalActivce);
});
.active {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">item1 </li>
<li>item2 </li>
<li>item3 </li>
<li class="active">item4 </li>
<li class="active">item5 </li>
<li class="active">item6 </li>
<li>item7 </li>
<li class="active">item8 </li>
<li class="active">item9 </li>
<li class="active">item10 </li>
</ul>


If you want to count the elements between your first element with the class active and the next you can use $('.active:first').nextUntil(".active")
Demo
$(document).ready(function() {
let totalActivce = $('.active:first').nextUntil(".active").length;
console.log(totalActivce);
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">item1 </li>
<li>item2 </li>
<li>item3 </li>
<li class="active">item4 </li>
<li class="active">item5 </li>
<li class="active">item6 </li>
<li>item7 </li>
<li class="active">item8 </li>
<li class="active">item9 </li>
<li class="active">item10 </li>
</ul>
Demo 2
$(document).ready(function() {
var f = 0;
$("ul li").each(function() {
if ($(this).is(".active") && $(this).nextUntil(':not(.active)').addBack().length == 3) {
f++;
}
});
console.log(f);
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">item1 </li>
<li>item2 </li>
<li>item3 </li>
<li class="active">item4 </li>
<li class="active">item5 </li>
<li class="active">item6 </li>
<li>item7 </li>
<li class="active">item8 </li>
<li class="active">item9 </li>
<li class="active">item10 </li>
</ul>
Demo 3
$(document).ready(function() {
var f = 0;
var s = 1;
$("ul li").each(function(i) {
if (s <= i) {
if ($(this).is(".active") && $(this).nextUntil(':not(.active)').addBack().length >= 3) {
s = s + 3;
f++;
}
}
});
console.log(f);
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>item1 </li>
<li class="active">item2 </li>
<li class="active">item3 </li>
<li class="active">item4 </li>
<li class="active">item5 </li>
<li class="active">item6 </li>
<li class="active">item7 </li>
<li class="active">item8 </li>
<li class="active">item9 </li>
<li class="active">item10 </li>
</ul>


You can loop your elements and check if previous elements where active:
$(document).ready(function() {
let totalActivce = $('.active').length;
let sets = 0;
let isPreviousActive = 0;
console.log(totalActivce);
$('ul li').each(function() {
let isActive = $(this).is('.active');
if (isActive) {
isPreviousActive++;
if (isPreviousActive == 2) {
sets++;
}
}
if (!isActive) {
isPreviousActive = 0;
}
});
console.log(sets);
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">item1 </li>
<li>item2 </li>
<li>item3 </li>
<li class="active">item4 </li>
<li class="active">item5 </li>
<li class="active">item6 </li>
<li>item7 </li>
<li class="active">item8 </li>
<li class="active">item9 </li>
<li class="active">item10 </li>
</ul>

Related

jquery menu with slide from left for sub menus

I wanted to slide sub menus from left or right if i click on li.menu-items for each item of a menu which have sub menus. here is my html markup
<ul class="menu">
<ul>
<li class="menu-item">
<a href="#">item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
item 2
</li>
<li class="menu-item">
<ul class="sub-menu">
<li><a href="">item 1</li></li>
<li><a href="">item 1</li></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
item 4
<ul class="sub-menu">
<li class="menu-item">
item5
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
<li class="menu-item">item 7</li>
<li class="menu-item">item 8</li>
</ul>
</ul>
if I click on menu item which have sub-menu then the sub menu will open from slide left or right and other menu items should be hide and a back button should be there at top left to back on main menu
here is my js
$('.menu-item').click(function(e){
if ($('.sub-menu', this).length >=1) {
e.preventDefault();
}
$(this).siblings().find('> .sub-menu').hide();
$(this).find('> .sub-menu').slideLeft();
e.stopPropagation();
});
please help me for this

I don't think is there any function in jQuery like slideLeft as far as I know. although you can do it with jQuery UI with a little trick like this.
$(this).show("slide", { direction: "left" }, 1000);
but I will prefer a custom CSS example based on jQuery classes.
check below code example. if you need anything else. please let me know.
and yes you also did a small mistake: you are having a UL direct child of your Menu UL, Ul can only have LI as a direct child, Correct it and pls close all the tags properly.
$('.menu-item').click(function(e) {
if ($('.sub-menu', this).length >= 1) {
e.preventDefault();
}
debugger;
$(this).siblings().find('> .sub-menu').removeClass('open');
$(this).find('> .sub-menu').addClass("open");
e.stopPropagation();
});
$('.back').click(function(e){
$(this).closest('.sub-menu').removeClass('open');
e.stopPropagation();
})
.menu {
background: #cccccc;
position: relative;
}
* {padding :0; margin: 0; box-sizing: border-box;}
.sub-menu {
display: block;
position: absolute;
height: auto;
width: 100%;
left: -100%;
transition: all 0.5s;
top: 0%;
}
.sub-menu.open {
left: 0;
background: #666;
}
.back {cursor: pointer; margin-bottom: 20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item">
item 1
<ul class="sub-menu">
<li class="back">back</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
<ul class="sub-menu">
<li class="back">back</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
item 4
<ul class="sub-menu">
<li class="back">back</li>
<li class="menu-item">
item5
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
<li class="menu-item">item 7</li>
<li class="menu-item">item 8</li>
</ul>

My code is not jQuery but I hope it works for you.
var x = document.getElementsByClassName('menu');
var y = x[0].getElementsByTagName('a');
for (let i = 0; i < y.length; i++) {
y[i].addEventListener("click", function () {
var z = this.nextElementSibling;
if(z){
var s = z.getAttribute('style');
if(s === 'display:none;') {
z.setAttribute('style', 'display:block;')
} else {
z.setAttribute('style', 'display:none;')
}
}
});
}
<ul class="menu">
<ul>
<li class="menu-item">
item 1
<ul class="sub-menu">
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
<ul class="sub-menu">
<li class="menu-item">
item 4
</li>
<li class="menu-item">
item 5
</li>
</ul>
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
</ul>
</ul>

How to create dynamic menu with list items?

I am trying to create a menu using list item's and unordered list's that are nested within each other to display sub menus. When each list item is clicked, it will display the child unordered list by adding the "show" class. I can't seem to figure out how to remove the "show" class once one of the "topLevel" list item components is clicked (those are the three main menu options).
Here's the jsFiddle: https://jsfiddle.net/eu1rc4ma/2/
Thanks in advance!
Tried using spans to remove the class from all child components.
<div class="container">
<div class="menu">
<ul class="show">
<li>
<span class="topLevel">Services</span>
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="topLevel">Technology</span>
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="topLevel">About</span>
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
ul {
display: none;
}
.show {
display: flex;
flex-direction: column;
}
let targets = document.querySelectorAll("li");
targets.forEach(function(target) {
target.addEventListener("click", function() {
let subMenu = target.querySelector("ul");
subMenu.classList.add("show");
});
});

Try this by checking if ul has .show
let targets = document.querySelectorAll("li");
let main, sub;
targets.forEach(function(target) {
if (target.parentElement.parentElement.tagName == "DIV") { // for mains
target.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
let subMenu = target.querySelector("ul");
toggleClass(subMenu);
if (main && main != subMenu) {
main.classList.remove("show")
}
main = subMenu;
});
} else if (target.parentElement.parentElement.parentElement.parentElement.tagName == "DIV") {
target.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
let subMenu = target.querySelector("ul");
toggleClass(subMenu);
if (sub && sub != subMenu) {
sub.classList.remove("show")
}
sub = subMenu;
});
} else {
target.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
});
}
});
function toggleClass(subMenu) {
if (subMenu.className.includes('show')) {
subMenu.classList.remove("show")
} else {
subMenu.classList.add("show");
}
}
ul {
display: none;
}
.show {
display: flex;
flex-direction: column;
}
<div class="container">
<div class="menu">
<ul class="show">
<li>
<span class="topLevel">Services</span>
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="topLevel">Technology</span>
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="topLevel">About</span>
<ul>
<li>
1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>
3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

Try this code in order to toggle your list:
let
let targets = document.querySelectorAll("li");
targets.forEach(function(target) {
target.addEventListener("click", function() {
let subMenu = target.querySelector("ul");
let isOpen = subMenu.classList.contains('show');
if (!isOpen) {
subMenu.classList.add("show");
} else {
subMenu.classList.remove("show");
}
});
});
working jsfiddle
https://jsfiddle.net/vfxtcbpd/2/

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>

Removing items by its contained text from html

I'm looking for a solution to remove items from my html when the page is loaded.
<ul class="nav navbar-nav">
<li class="dropdown">
Модули <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<strong>blabla</strong>
</li>
<li>
blabla6
</li>
<li role="presentation" class="divider"></li>
<li>
<strong>blabla5</strong>
</li>
<li>
blabla4
</li>
<li>
blabla3
</li>
<li>
blabla2
</li>
<li>
blabl1
</li>
</ul>
</li>
So I want to remove for example blabla4, blabla2, blabla1 including their <li> tags
This is what I've tried so far
<script type="text/javascript">
// select relevant elements
var elements = $('content-main');
// go through the elements and find the one with the value
elements.each(function(index, domElement) {
var $element = $(domElement);
// does the element have the text we're looking for?
if ($element.text() === "blabla2") {
$element.hide(); // hide the element with jQuery return false;
// jump out of the each
}
});
</script>

Just collect the list items, cast the resulting NodeList to an Array, and iterate over it, removing items whose innerHTML contains 'blabla'.
const listitems = Array.from(document.querySelectorAll('.dropdown-menu li'));
for (const listitem of listitems) {
if (listitem.innerHTML.indexOf('blabla') != -1) {
listitem.parentNode.removeChild(listitem);
}
}
<ul class="dropdown-menu" role="menu">
<li>
<strong>blabla</strong>
</li>
<li>
blabla6
</li>
<li role="presentation" class="divider"></li>
<li>
<strong>blabla5</strong>
</li>
<li>
blabla4
</li>
<li>
blabla3
</li>
<li>
blabla2
</li>
<li>
blabl1
</li>
</ul>

Use JQuery .remove() to delete HTML tags, But you should have a selector on the tags that you want to remove:
$( document ).ready(function() {
$('.dropdown-menu').find("li").slice(4, 5).remove();
$('.dropdown-menu').find("li").slice(5, 6).remove();
$('.dropdown-menu').find("li").slice(5, 6).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown">
Модули <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<strong>blabla</strong>
</li>
<li>
blabla6
</li>
<li role="presentation" class="divider"></li>
<li>
<strong>blabla5</strong>
</li>
<li>
blabla4
</li>
<li>
blabla3
</li>
<li>
blabla2
</li>
<li>
blabl1
</li>
</ul>
</li>
</ul>

You can create a array data structure that will hold the values for which <li> should be removed then loop over to all the <li> tags inside the class dropdown-menu and remove them based on their content match with the array value:
$(document).ready(function(){
var removeText = ['blabla4', 'blabla2', 'blabla1'];
$('.dropdown-menu li').each(function(){
var text = $(this).find('a').text().trim();
if(removeText.indexOf(text) !== -1){
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown">
Модули <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<strong>blabla</strong>
</li>
<li>
blabla6
</li>
<li role="presentation" class="divider"></li>
<li>
<strong>blabla5</strong>
</li>
<li>
blabla4
</li>
<li>
blabla3
</li>
<li>
blabla2
</li>
<li>
blabl1
</li>
</ul>
</li>

You can do it using JQuery:
$(".dropdown-menu > li > a").each(function () {
var $this = $(this);
if ($this.html() == 'bla bla bla') {
$this.parent().remove();
}
});

An alternative is using the selector :contains and the function closest to select the parent element li.
This approach removes the element li with text blabla4
$('#remove').on('click', function() {
$("li a:contains(blabla4)").closest('li').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown">
Модули <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<strong>blabla</strong>
</li>
<li>
blabla6
</li>
<li role="presentation" class="divider"></li>
<li>
<strong>blabla5</strong>
</li>
<li>
blabla4
</li>
<li>
blabla3
</li>
<li>
blabla2
</li>
<li>
blabl1
</li>
</ul>
</li>
</ul>
<button id='remove'>remove blabla4</button>

You can select the items using querySelectorAll, convert the NodeList to Array with Array.from, then iterate over each item and remove it.
const wordsToRemove = ['blabla3', 'blabla2'];
const items = Array.from(document.querySelectorAll('li > a'));
const result = items
.filter(item => wordsToRemove.includes(item.textContent))
.forEach(item => item.parentNode.parentNode.removeChild(item.parentNode));
<ul class="nav navbar-nav">
<li class="dropdown">
Модули <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<strong>blabla</strong>
</li>
<li>
blabla6
</li>
<li role="presentation" class="divider"></li>
<li>
<strong>blabla5</strong>
</li>
<li>
blabla4
</li>
<li>
blabla3
</li>
<li>
blabla2
</li>
<li>
blabl1
</li>
</ul>
</li>

jQuery selector for li in ul li

I create a menu & want to when click on li children just child set .active class no li parent
(Use in enfold WordPress theme)
$('#mobile-advanced li.menu-item-has-children').on('click', function () {
$(this).toggleClass('active');
});
// just for test
$('a').on('click', function (e) {
e.preventDefault() ;
});
li.active{
background-color: #FFB94B;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-advanced">
<li class="menu-item menu-item-has-children">
T 1
<ul>
<li class="menu-item menu-item-has-children">
T11
<ul>
<li class="menu-item">T111</li>
<li class="menu-item">T112</li>
</ul>
</li>
<li class="menu-item">T12</li>
<li class="menu-item">T13</li>
</ul>
</li>
<li class="menu-item">
T 2
</li>
</ul>
for example, when I click li children li parent set active class

you can detect event click with a tags :
$('#mobile-advanced li.menu-item-has-children a').on('click', function () {
$(this).parent().toggleClass('active');
});
// just for test
$('a').on('click', function (e) {
e.preventDefault() ;
});
li.active{
background-color: #FFB94B;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-advanced">
<li class="menu-item menu-item-has-children">
T 1
<ul>
<li class="menu-item menu-item-has-children">
T11
<ul>
<li class="menu-item">T111</li>
<li class="menu-item">T112</li>
</ul>
</li>
<li class="menu-item">T12</li>
<li class="menu-item">T13</li>
</ul>
</li>
<li class="menu-item">
T 2
</li>
</ul>

You just need add another class into the element you want to change. In my case, i define anther class called "active-this" and apply the jquery function to this class. Follow the example:
$('.active-this').on('click', function () {
$(this).toggleClass('active');
});
// just for test
$('a').on('click', function (e) {
e.preventDefault() ;
});
li.active{
background-color: #FFB94B;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-advanced">
<li class="menu-item menu-item-has-children">
T 1
<ul>
<li class="menu-item menu-item-has-children">
T11
<ul>
<li class="menu-item active-this">T111</li>
<li class="menu-item active-this">T112</li>
</ul>
</li>
<li class="menu-item active-this">T12</li>
<li class="menu-item active-this">T13</li>
</ul>
</li>
<li class="menu-item">
T 2
</li>
</ul>

You can use the below selector to be able to click on li menu items excluding parent li elements.
$('#mobile-advanced li.menu-item').not(".menu-item-has-children")
$('#mobile-advanced li.menu-item').not(".menu-item-has-children").on('click', function (e) {
e.preventDefault();
$(this).toggleClass('active');
});
$(".menu-item-has-children").on('click', function(e){
e.preventDefault();
})
li.active {
background-color: #FFB94B;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="mobile-advanced">
<li class="menu-item menu-item-has-children">
T 1
<ul>
<li class="menu-item menu-item-has-children">
T11
<ul>
<li class="menu-item">
T111
</li>
<li class="menu-item">
T112
</li>
</ul>
</li>
<li class="menu-item">
T12
</li>
<li class="menu-item">
T13
</li>
</ul>
</li>
<li class="menu-item">
T 2
</li>
</ul>

Categories

Resources