add "active "class to the selected list item through javascript - javascript

I have a class name "active" which i want to be added to the selected list item.
Here is how my list style looks like:
<ul class="page-sidebar-menu">
<li class="start active">
<span class="title">Dashboard</span>
</li>
<li >
<span class="title">Pages</span>
<ul class="sub-menu">
<li >
All Page
</li>
<li >
Add Page
</li>
</ul>
</li>
<li>
<span class="title">Posts</span>
<ul class="sub-menu">
<li >
All Posts
</li>
<li >
Add Posts
</li>
</ul>
</li>
</ul>
i want to add class on two places one is "li" under sub-menu and <span class="title">Posts</span>
It should look something like this
I tried something like this but didnt work
$('.page-sidebar-menu ul li a').click(function() {
$('.page-sidebar-menu ul li').removeClass('active');
$(this).addClass('active');
});
Please suggest some solution.
Thank you!

$(".sub-menu li").addClass("active");
$(".title").addClass("active");
To add a class to a the list-element and the title Post element.
If you want to remove a class you can use. '.removeClass([class to be removed])'
function to do so:
$(".sub-menu li").click(function(){
$(".sub-menu li").removeClass('active');//to make sure there will be only one with the class 'active'
$(this).addClass('active');
});
DEMO

Related

jquery on click change class of list element

Here is my dynamically generated lists :
<ul class="config-swatch-list">
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
<li class='color' onclick="color_select();">
</li>
</ul>
and the js function:
function color_select() {
$('#color').click(function()
{
if ($(this).hasClass('active')) {
console.log('clicked');
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
}
My problem is using this code when I clicked 1st li element, this js function add a active class successfully . But this does not work for 2nd, or 4th li element (printing clicked in console).So the codes only working for 1st, 3rd , and 5th li elements. If I double click 2nd or 4th li element then the code working as expected.
All I want to do is after a click change a single li element css class to active or remove active class if there is already existing active class.
Remove onclick attributes from <a>. And don't wrap click inside other function. And also use .color instead of #color
`
$('.color').click(function()
{
if ($(this).hasClass('active')) {
console.log('clicked');
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
.active{
color:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color'>
one
</li>
<li class='color'>
two
</li>
<li class='color'>
three
</li>
<li class='color' >
four
</li>
<li class='color'>
five
</li>
</ul>
jQuery.click() vs onClick .. you can still use onclick .. and use toggleClass() for active class instead of add/removeClass
function color_select(el) {
$('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
}
.active{
color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">
<li class='color' onclick="color_select(this);">
Link 1
</li>
<li class='color' onclick="color_select(this);">
Link 2
</li>
<li class='color' onclick="color_select(this);">
Link 3
</li>
<li class='color' onclick="color_select(this);">
Link 4
</li>
<li class='color' onclick="color_select(this);">
Link 5
</li>
</ul>
But to be honest personally I don't prefer to use onclick= using a .click which presented by #Maheer answer is for me much much better

Jquery show or hide children link if it is available

I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>
This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/

How to append a span to a <li> if a submenu exists

I'm trying to build a responsive navigation and want to append a <span> to all top level menu items that contain a submenu <ul>. For some reason this just appends the span to all items, can anybody advise as to why?
Here's the markup:
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
Home
<ul class="nav-submenu">
<li class="nav-submenu-item">
Submenu item 1
</li>
<li class="nav-submenu-item">
Submenu item 2
</li>
<li class="nav-submenu-item">
Submenu item 3
</li>
<li class="nav-submenu-item">
Submenu item 4
</li>
</ul>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Portfolio
</li>
<li class="nav-item">
Testimonials
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
So you can see the first item has a dropdown, and I want to dynamically append a span element to each <li> that contains a submenu.
And the script (jQuery):
$.each($('.nav-item'), function (index, value) {
if ($('.nav-item').children('ul').length > 0) {
$(this).append($('<span class="nav-click"></span>'));
}
});
Help appreciated!
Actually this is all you need:
$('.nav-item:has(ul)').append('<span class="nav-click" />');
LIVE DEMO
using :has or .has() will be much more fun than all this $.each looping. The class looping is already done using class as selector cause returns a collection of your desired elements additionally filtered by has, all in one line.
http://api.jquery.com/has-selector/
http://api.jquery.com/has/
In the case you're planning to have a multi-sub-level list use:
$('nav li:has(ul)').append('<span class="nav-click" />');
LIVE DEMO
Try this
$.each($('.nav-item'), function (index, value) {
if ($(this).children('ul').length > 0) {
$(this).append($('<span class="nav-click"></span>'));
}
});
You have problem in this line:
if ($('.nav-item').children('ul').length > 0) {
this will always select first .nav-item found
you need to use this instead as you are looping through each .nav-item
if ($(this).children('ul').length > 0) {

jQuery accordion slides up multiple times

I'm making a jquery accordion and I have some issues
My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav
Here is my jquery code so far:
if($(this).has("ul").length){
$(".menu ul li").on('click',function(e){
$(this).addClass('open').siblings().removeClass('open').children();
$('.menu ul li ul').slideUp();
if($(this).parents().find(".open").length){
$(this).children('ul').slideDown();
}
//$(this).parents().find(".open").children('ul').slideDown();
e.preventDefault();
});
};
this is my html:
<div class="menu">
<a id="jump" href="#"><p>Menu</p><span class="right">▼</span></a>
<nav class="row">
<div class="page_wrapper">
<ul class="niveau_1">
<li class="active">Home</li>
<li>Group
<ul class="sub-menu">
<li>QHSE/Awards</li>
<li>Vacatures/</li>
</ul>
</li>
<li>Nieuws & Media
<ul class="sub-menu">
<li>Van Moer in de media</li>
<li>Nieuwsarchief</li>
</ul>
</li>
<li>Sport & Events
<ul class="sub-menu">
<li>Casual Friday
<ul>
<li>Inschrijving</li>
<li>Foto's</li>
</ul>
</li>
<li>Thursday Lounge</li>
<li>Triatlon</li>
<li>Sponsoring</li>
<li>Beurzen</li>
<li>Kalender</li>
</ul>
</li>
<li>Vestigingen</li>
<li>Contact</li>
</ul>
</div>
just guessing sincei don't have HTML to look too... your problem is here in parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
i think u need parent() here
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
if($(this).parent().find(".open").length){ //try this
$(this).children('ul').slideDown();
}
note: it would be easy if you provide us with your HTML too

active class javascript

I have used the following code to display menu
<ul id="menu">
<li id="11">Start a League<span></span></li>
<li id="12">Roster Settings<span></span></li>
<li id="13">Draft Settings<span></span></li>
<li id="14">Transaction Settings<span></span></li>
<li id="15">Playoff Settings<span></span></li>
<li id="16">Launch Your League!<span></span></li>
</ul>
If I click any menu the class active should be added in that particular li. How can i do it with javascript.
Using jQuery:
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});
I supposed that you only wanted a single <li> with the active class.
Demo: http://jsfiddle.net/j9qTE/1/

Categories

Resources