Mirror add class to ul li in jquery - javascript

I have tested this code. but there have some error. i am also attachment with JPG file what my need exactly please suggestion me.
$('.list ul li a').click(function() {
$('.list li a').removeClass("ad");
$(this).addClass("ad");
});
.ad{background-color:green;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
<div class="list">
<h4>B</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>

Okay, you must create a link between A children and B children, you can set a data attribute for example data-id then find the equals with:
$('.list li a[data-id="'+dataId+'"]').addClass('ad');
$('.list ul li a').click(function() {
var dataId = $(this).attr('data-id');
$('.list ul li a').removeClass('ad');
$('.list li a[data-id="'+dataId+'"]').addClass('ad');
});
.ad {
background-color: green;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
<div class="list">
<h4>B</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
Update: on your website, use something like this:
setInterval(function() {
$('.btn-nav-main').each(function() {
if ($(this).hasClass('active')) {
var dataSlide = $(this).attr('data-slide');
$('.btn-nav-main').removeClass('gg');
$('.btn-nav-main data-slide["' + dataSlide + '"]').addClass('gg');
}
});
}, 1000);

Related

open one level deep sub-menu, only, on each click using jquery OR javascript

The issue I am having is:
when I click on "menu2", it is showing me sub-menu and all options of sub-menu.
Expected result:
click on "menu2" should open "sub-menu2" only and NO "sub-menu2" options.
click on ""sub-menu2" should open all it's children.
I see there are some question on related to this one but I did not find any question similar to mine.
If you can suggest a way to do this in pure JS/ES that would be great. Currently I am using jQuery.
$('.container > ul > li').on('click', function(){
$('ul',this).toggle(200);
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>
YOu just need to use your selector a bit different way, and its done, if need something else, pls let me know
$('.container li').on('click', function(e) {
var ckeckChildVisiblity = $(this).find('>ul').is(':visible');
if (!ckeckChildVisiblity) {
$(this).find('>ul').slideDown();
return false;
} else {
$(this).find('>ul').slideUp();
return false;
}
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>
This can be done using toggling immediate children and stop event propagation.
$('.container li').on('click', function(event){
$(this).children("ul").toggle(200)
event.stopPropagation()
})
.menu ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class ="menu">menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li class ="menu">menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

DOM CSS selector: how to select a sibling of a parent element if the li has active class

Please find below HTML structure. I want add class to the parent span if any of the li has active class.
<span class="caret menus">Test</span>
<ul class="nested">
<li>
<a>Test1</a>
</li>
<li>
<a>Test2</a>
</li>
<li>
<a>Test3</a>
</li>
<li>
<a class="active">Test4</a>
</li>
</ul>
i have tried with below code but only i can able to traverse till nested.
var selected = document.querySelector('ul li a.active');
var close = selected && selected.closest('.nested');
If you wanted to select the span from your structure, you could use .previousElementSibling.
var selected = document.querySelector('ul li a.active');
var close = selected && selected.closest('.nested').previousElementSibling;
console.log(close)// returns span element
The span is sibling of the ul, not of the a you're getting. You need to navigate up through the HTML structure to get it:
var selected = document.querySelector('ul li a.active');
var span = selected && selected.parentElement.parentElement.previousElementSibling;
if (span) span.classList.add('nested');
span.nested, li a.active {
color: blue
}
<span class="caret menus">Blue if nested</span>
<ul class="nested">
<li>
<a>Test1</a>
</li>
<li>
<a>Test2</a>
</li>
<li>
<a>Test3</a>
</li>
<li>
<a class="active">Test4</a>
</li>
</ul>
Or you could also get it by using another querySelector:
var selected = document.querySelector('ul li a.active');
var span = selected && document.querySelector('span.caret');
if (span) span.classList.add('nested');
span.nested, li a.active {
color: blue
}
<span class="caret menus">Blue if nested</span>
<ul class="nested">
<li>
<a>Test1</a>
</li>
<li>
<a>Test2</a>
</li>
<li>
<a>Test3</a>
</li>
<li>
<a class="active">Test4</a>
</li>
</ul>

removing html tags but keep the inner html

I have a nav menu which have a mega menu.It has several markup to make it a mega menu.But i want to remove some of the markups when in small viewport.
So my markups are
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>
what i want
<ul class="megamenu-wrapper">
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
i have two mega-menu-wrapper
What i have tried
var megaContents = $('.megamenu-wrapper li ul').contents();
$('.megamenu-wrapper li ul').replaceWith( megaContents );
It makes a same list in two each mega menu and in each megamenu there is about 5 times repetation of each elements.
Anyone please help.
Use
//Fimd child ul li and append it to main ul
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper');
//Remove li having ul
$('.megamenu-wrapper > li:has(ul)').remove();;
$(document).ready(function() {
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper'); +
$('.megamenu-wrapper > li:has(ul)').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home
</li>
<li>Abort
</li>
<li>Contact
</li>
</ul>
</li>
<li>
<ul>
<li>gang
</li>
<li>menu
</li>
<li>food
</li>
</ul>
</li>
</ul>
use .each() if you have multiple menus
$('.megamenu-wrapper') each(function () {
$(this).find('> li > ul > li').appendTo(this);
$(this).find(' > li:has(ul)').remove();
});
DEMO
With your current markup, you can use append() which will take the children li with anchors and append them as direct children of .megamenu-wrapper
Then, use remove() to remove the former parent li elements which now contain empty ul children
$('.megamenu-wrapper').append($('li:has(a)'));
$('.megamenu-wrapper').children('li:has(ul)').remove();
Update
For multiple menus, you can use the snippet above, but wrap it in an each() call
$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));
$(this).children('li:has(ul)').remove();
});
$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));
$(this).children('li:has(ul)').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>

how to hide ul li with specific class on page load by default before toggle click function apply

I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.

jQuery click filter lists

apologies but i'm fairly new to js. Basically i have the main navigation at the top (#filter), then i have 3 further lists (#one, #two and #three).
What i want to do is when clicked on All it shows all of the list items from #one, #two and #three. Then when clicked on One it only shows the list items from #one, Two from #two and Three from #three.
Here's the mark-up to help.
<ul id="filter">
<li class="current">
All
</li>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
<ul id="one">
<li>
1
</li>
<li>
1
</li>
</ul>
<ul id="two">
<li>
2
</li>
<li>
2
</li>
</ul>
<ul id="three">
<li>
3
</li>
<li>
3
</li>
</ul>
$(function() {
$('#filter a').on('click', function(e) {
e.preventDefault();
var clicked = $.trim( $(this).text().toLowerCase() );
if ( clicked == 'all' ) {
$('#one, #two, #three').show();
}else{
$('#one, #two, #three').hide();
$('#' + clicked).show();
}
$(this).closest('li')
.addClass('current')
.siblings()
.removeClass('current');
});
});

Categories

Resources