I want to open child UL on parent LI click. Problem is that i have links to subpages on parent LI, which needs to be disabled so they don't redirect to subpage, but rather to expand child UL. Where there is no child UL, links on parent LI work normaly.
Code bellow works for disabling default URL and expands child UL, but it also disables child UL LI URL's, which should not.
So when i click on "No child" it should send me to yahoo, but when i click on Yes child it should expand child UL.sub-nav and links in .sub-nav li should work normaly.
Hope it's clear enough
Here's HTML
<nav>
<ul>
<li>No child</li>
<li>Yes child
<ul class="sub-nav">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
<li>No child</li>
</ul>
</nav>
and JS
$("nav ul li ul").css("display", "none");
$("nav li a").click(function (e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
Fiddle here
You can target only anchor elements which has a ul to display
$("nav li:has(ul) > a").click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
nav ul ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>No child
</li>
<li>Yes child
<ul class="sub-nav">
<li>submenu1
</li>
<li>submenu2
</li>
</ul>
</li>
<li>No child
</li>
</ul>
</nav>
Related
I wanted to make current selected menu highlighted using jquery
Following is my jquery code
$('ul li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
Meeting Overview
Meeting Details
</div>
</ul>
Please help
$('ul li a').click(function() {
//$('li').removeClass();
//$(this).parent().addClass('active');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<li> Meeting Overview </li>
<li> Meeting Details </li>
</div>
</ul>
If you are trying to make sub menu use this
$(document).ready(function(){
if (localStorage.getItem('current_page')) {
var page = localStorage.getItem('current_page');
$('ul li').removeClass('active');
$('ul li[data-page="'+page+'"]').addClass('active');
}
});
$('ul li > a').click(function() {
$('li').removeClass('active');
$(this).parent().addClass('active');
var page = $(this).parent().attr('data-page');
localStorage.setItem('current_page', page);
});
In your code, $(this).parent() is your <li> element only when you click your first link, links under dropdown-content div have not an <li> parent, so, the removeClass() function is not working as you expected.
Please, changethis and tell us if your code works as you expect.
Try this
$('ul li a').click(function() {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
ul li{
list-style-type:none;
float:left;
display:inline-block;
margin:0 10px;
padding:5px;
}
ul li.active{
background:pink;
}
li a{
text-decoration:none;
outline:0;
}
ul li.active a{
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Menu1
</li>
<li class="dropdown">
Menu2
</li>
</ul>
This can´t work as expected. The problem is, you click the link () the current li elemet gets the class "active" and then the page refreshes because the link redirects you, which removes the active class from the current li element.
What you can do is teh following:
Option 1: Get the current path from the url
When the page gets loaded, you can extract the path and add the active class to the li that contains the link:
$(document).ready(function() {
var currentPath = window.location.pathname;
$('a[href="'+currentPath+'"]').partent().addClass("active");
});
This will find the link with the currentPath and add the class active to the corresponding li element.
You also need to wrap all links in separate list-elements:
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<ul>
<li>Meeting Overview</li>
<li>Meeting Details</li>
</ul>
</div>
</li>
</ul>
Option 2: Add the active link name as Query Param
You can append a query param to your links like this:
<li class="link home">
Meeting Overview
</li>
<li class="link usermeetings">
Meeting Details
</li>
In your javascript you can then get the page param and add the active class like this:
$(document).ready(function() {
var page = $.url().param('page');
$('.link').find('.' + page).addClass('active');
});
I am trying to toggle between font-awesome elements .
I want to remove the font-awesome element when a new a tag is clicked. The font-awesome element should be visible only for the current clicked a tag.
[FIDDLE][1]
My JS CODE.
$(document).ready(function() {
$('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$('.nav ul li a').click(function(event) {
event.preventDefault();
$(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working
});
});
$(document).ready(function() {
var fontAwesome = $('<i/>').addClass('fa fa-chevron-right');
$('.nav ul li:first').append(fontAwesome);
$('.nav ul li a').on('click', function(event) {
event.preventDefault();
$('.nav ul li a i.fa.fa-chevron-right').remove();
$(this).append(fontAwesome);
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li>Option A</li>
<li>Option B</li>
<li>Option C</li>
</ul>
</div>
I know that you have accepted an answer, but you don't need all that logic - all you have to do is set an active class on the currently selected li - and using CSS add the FA icon to that element. Then clicking each li will remove the active class from the list and then apply it to the selected l=i - and the icon will magically move. Note that I have not applied an event.preventDefault(); to the click of a's - I presume that they should in fact navigate to the element you want - since they are in a nav list.
The benefit of setting the active class to the li - is that you can then style it as you want - as well as adding the icon to it.
$(document).ready(function() {
$('nav ul li').click(function(){
$('nav ul li').removeClass('active');
$(this).addClass('active');
})
});
nav ul li.active:after {
font-family: FontAwesome;
content: "\f054";
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
How can I remove elements onward which starting point is the clicked element parent?
$(document).ready(function(){
$('.breadcrumb li a').click(function(){
});
});
.breadcrumb,.breadcrumb li{list-style:none;}
.breadcrumb li{float:left;margin:3px;}
.breadcrumb li a{text-decoration:none;outline:none;}
.breadcrumb li:not(:first-child):before{content:'/';}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="breadcrumb">
<li>
parent
</li>
<li>
parent sub 1
</li>
<li>
parent sub 2
</li>
<li>
parent sub 3
</li>
</ol>
Above is my snippet, so If I click unto the element that has a text of 'parent', all the elements onwards after to the clicked element parent (li) which is the starting point should be remove. Any help, ideas, clues, suggestions, recommendations please?
You can use .parent(), .nextAll() with selector "li", .remove()
$(document).ready(function(){
$(".breadcrumb li a").click(function(){
$(this).parent().nextAll("li").remove()
});
});
.breadcrumb,.breadcrumb li{list-style:none;}
.breadcrumb li{float:left;margin:3px;}
.breadcrumb li a{text-decoration:none;outline:none;}
.breadcrumb li:not(:first-child):before{content:'/';}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="breadcrumb">
<li>
parent
</li>
<li>
parent sub 1
</li>
<li>
parent sub 2
</li>
<li>
parent sub 3
</li>
</ol>
I have a few lists, something like so:
<div id="menu" class="divclass">
<ul id="firstlist">
<li><a href='#'>...</a></li>
<li><a href='#'>...</a></li>
<li><a href='#'>...</a></li>
</ul>
<ul id="secondlist">
<li><a href='#'>...</a></li>
<li><a href='#'>...</a></li>
<li><a href='#'>...</a></li>
</ul>
<!-- etc. - similar unordered lists follow. -->
</div>
When one of the <a> elements is clicked, I want to clear all the <li> elements of its list of the 'active' class. I've been fiddling around with .parent(), .children(), and .removeClass('active') but I think I'm totally missing something because I can't get it to work. Can anyone give me a hand? This is the beginning of the script:
$(document).ready(function() {
$(".divclass ul li a").click(function() { ... }}
where .divclass is the class of the div that contains the unordered lists.
Remove all
$(".divclass ul li a").click(function() {
$(this).closest('.divclass').find('li').removeClass('active');
}};
Remove only form the same list
$(".divclass ul li a").click(function() {
$(this).closest('ul').find('li').removeClass('active');
}};
If you also want to add the class active to the li parent of the a clicked:
$(".divclass ul li a").click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
}};
You can use:
$("#menu a").click(function() {
//to remove class active from li elements
$(this).closest('ul').find('.active').removeClass('active');
//to remove li with active class
$(this).closest('ul').find('.active').remove();
});
i have this html menu:
<ul id='main'>
<li class='active current' id='lighty'>
<a href='/'>Lighty</a>
<ul>
<li class='sub'>
<a href='/'>Hem</a>
</li>
</ul>
</li>
<li id='community'>
<a href='/community'>Community</a>
</li>
</ul>
And this jquery:
$("#menu ul > li").mouseenter(function(){
id = $(this).attr("id");
$("#menu #main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
id = $(this).attr("id");
menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
});
What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds.
It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.
The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.
Can anybody help me to fix this error? Maybe you have a better solution?
Here is also a screenshot on how the menu looks if it helps:
screen shot under or click here
is this what you mean?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("ul#main > li").mouseenter( function(){
$("#main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
setTimeout( function()
{
$("#main li").removeClass("active");
}, 2000);
});
});
//-->
</script>
<style type="text/css">
#main li ul {
display: none;
}
#main li.active ul {
display: inline;
}
</style>
<ul id="main">
<li id="lighty">
Lighty
<ul>
<li class="sub">
Hem
</li>
</ul>
</li>
<li id="community">
Community
<ul>
<li class="sub">
more
more1
more2
more4
</li>
</ul>
</li>
</ul>