I am unable to target an element with an id, whenever there is a click event. It's a pretty simple solution, no idea why this isn't working out. Please help me with it.
$('ul.main-menu li').click(function(e) {
e.preventDefault();
if ($(this).siblings('li').find('a').has('#has-sub-menu')) {
alert('sub-menu')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a id="has-sub-menu" href="#">Company</a>
</li>
</ul>
so the li is not the click event, the A is.
I've also made it a class of submenu. not an ID.
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a class="has-sub-menu" href="#">Company</a>
</li>
</ul>
<script >
$('ul.main-menu li a').click(function(e) {
e.preventDefault();
if ($(this).hasClass('has-sub-menu')) {
alert('sub-menu')
}
});
</script>
You can directly add the click event on the a with the id:
$('#has-sub-menu').click(function(e) {
e.preventDefault();
alert('sub-menu');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a id="has-sub-menu" href="#">Company</a>
</li>
</ul>
Related
I'm working on this portfolio site of mine
http://miketest.best/
and the top right hamburger .toggleClass() doesn't fire immediately on every click. Seems to work but there's some weird delay sometimes that doesn't make it fire/toggle immediately upon each click (if at all)?
If useful this is Wordpress and using it on my custom theme.
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls"></span>
</div>
Your trigger class is .cls,but in your DOM you have don't give any visible content to click.I was added .cls to a string click me and added that .cls class some styling.
Check out this
jQuery(document).ready(function($) {
$('.cls').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
.oppenned{
background:#e3e3e3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls"></span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME
</li>
<li onclick="slideTo('slide-0')">ABOUT
</li>
<li onclick="slideTo('slide-1')">SERVICES
</li>
<li onclick="slideTo('slide-3')">PORTFOLIO
</li>
<li onclick="slideTo('slide-4')">CONTACT
</li>
</ul>
</span>
<span class="cls">click me</span>
</div>
Instead of applying click on .cls try it on .open.
jQuery(document).ready(function($) {
$('.open').click(function(){
console.log('fire');
$('.open').toggleClass('oppenned');
});
});
you was using click event on a non-visible span tag. That's why the click event is not working. just use any text or any element inside the span tag. Then you will get it visible. when you will on visible element it will work.
jQuery(document).ready(function($) {
$('.cls').click(function() {
console.log('fire');
$(this).parents('.open').stop().toggleClass('oppenned');
});
});
<style type="text/css">
.oppenned{
background:#e3e3e3;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open">
<span class="cls">something to click me</span>
<span>
<ul class="sub-menu ">
<li onclick="slideTo('slide-2')">HOME</li>
<li onclick="slideTo('slide-0')">ABOUT</li>
<li onclick="slideTo('slide-1')">SERVICES</li>
<li onclick="slideTo('slide-3')">PORTFOLIO</li>
<li onclick="slideTo('slide-4')">CONTACT</li>
</ul>
</span>
<span class="cls">something to click me</span>
</div>
when i am trying to add toggle function to the child nodes nothing is happening could you help me out.
$(document).ready(function() {
$('label.tree-toggler').click(function() {
$(this).parent().children('ul.tree').toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
<li><label class="tree-toggler nav-header">WorkLoad</label>
<ul class="nav nav-list tree">
<li><label class="tree1">DME Report</label>
<ul class="tree1">
<li>
Report1
Report2
</li>
</ul>
</li>
<li>CAMB Report</li>
<li>LMAB Report</li>
<li>DMF Notification</li>
<li>LME Forecast Report</li>
</ul>
</li>
</ul>
You can make this work in a generic way by attaching the click event handler only to li elements which have child ul using the :has selector. Then you can toggle() those ul within the click handler.
Also note the handler will need to call stopPropagation() on the event to stop the parent li from closing their child ul elements too. Try this:
$(document).ready(function() {
$('ul > li:has(ul)').click(function(e) {
e.stopPropagation();
$(this).find('> ul').toggle(300);
});
});
ul > li > ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
<li>
<label class="nav-header">WorkLoad</label>
<ul class="nav nav-list tree">
<li>
<label class="tree1">DME Report</label>
<ul class="tree1">
<li>
Report1
Report2
</li>
</ul>
</li>
<li>CAMB Report</li>
<li>LMAB Report</li>
<li>DMF Notification</li>
<li>LME Forecast Report</li>
</ul>
</li>
</ul>
This would allow to simplify the above code to:
The code below mostly works as intended, ...
$(document).ready(function() {
$('label.tree-toggler, label.tree1').click(function() {
$(this).parent().children('ul.tree , ul.tree1').toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
<li><label class="tree-toggler nav-header">WorkLoad</label>
<ul class="nav nav-list tree">
<li><label class="tree1">DME Report</label>
<ul class="tree1">
<li>
Report1
Report2
</li>
</ul>
</li>
<li>CAMB Report</li>
<li>LMAB Report</li>
<li>DMF Notification</li>
<li>LME Forecast Report</li>
</ul>
</li>
</ul>
I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.
The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
HTML
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
Here's the working code:
$("li.test a").on("click",function() {
if($(this).hasClass("active")){
$(this).removeClass("active");
} else{
$("a.active").removeClass("active");
$(this).addClass("active");
}
});
.active{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
(Working pen)
Be aware you have classes "test1" and "test2" in the HTML, but class "test" in the JS!
Use the not method to skip your current element.
$("li.test a").click(function() {
var $this = $(this);
$('.test a').not($this).removeClass('active');
$this.toggleClass("active");
});
You have to remove the class from other elements before toggling.
Try this
$("li.test a").click(function() {
$("li.test a.active").removeClass("active");
$(this).toggleClass("active");
});
This first removes all the anchors with class active and then toggles the clicked anchor with the class.
Try this.
$("li").click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
li.active a{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="test1 active">
test
</li>
<li class="test1">
test
</li>
<li class="test1">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
</ul>
Go through below mentioned link or below mentioned code may be it can help you.
JSFiddle
HTML Code
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
CSS Code
.active{
color:#00adef;
}
JAVASCRIPT Code
$("a").click(function(){
$('a').removeClass('active');
$(this).addClass("active");
});
I got this HTML:
<ul>
<li>Test</li>
<li>Test2</li>
<a href="#" class="with-sub"><li>Test3</li>
<ul class="sub">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</a>
</ul>
And jQuery:
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
$(".sub").hide();
});
$(".with-sub").click(function() {
$(this).find(".sub").slideDown( "slow", function() {
});
});
</script>
When I click on the link with "with-sub" class nothing happens.
You can change your html and jquery to following:
$(".with-sub").click(function() {
$(this).next("ul").slideDown();
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<a href="#">
<li>Test</li>
</a>
<a href="#">
<li>Test2</li>
</a>
<a href="#" class="with-sub">
<li>Test3
<ul class="sub">
<li>Sub1
</li>
<li>Sub2
</li>
<li>Sub3
</li>
</ul>
</li>
</a>
</ul>
As mention in comments your html is not correct. ul elements can contain zero or more li elements, eventually mixed with ol and ul elements.
$(".with-sub").click(function() {
$(this).find("ul").toggle();
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Test
</li>
<li>
Test2
</li>
<li class="with-sub">Test3
<ul class="sub">
<li>
Sub1
</li>
<li>
Sub2
</li>
<li>
Sub3
</li>
</ul>
</li>
</ul>
Your current code does not work because you are attempting to bind an event to elements that do not exist in the DOM yet - you need to put the click() handler inside the DOMReady handler.
Also note that your HTML is invalid - only li elements can be direct descendants of the ul element. Try this:
<ul>
<li>
Test
</li>
<li>
Test2
</li>
<li>
Test3
<ul class="sub">
<li>
Sub1
</li>
<li>
Sub2
</li>
<li>
Sub3
</li>
</ul>
</li>
</ul>
Once you've fixed your HTML, the following jQuery will work:
$(document).ready(function() {
$(".sub").hide();
$(".with-sub").click(function() {
$(this).siblings(".sub").slideDown("slow");
});
});
Working example
I know this is incredibly easy but I have been writing and rewriting this function for whole day with no success, hope anyone can help me out.
I have an <li class="has-children">, when I click on it, it'll check if <ul> tag of this event inside has class is-hidden, it'll remove that class, my code work very well.
Now, I want to when click on <li class="go-back">, the parent (in this case is <ul class="sub-menu"> will add is-hidden again, but it doesn't work. I've used console.log to debug and nothing error. What I'm doing wrong?
Thanks for your time!
Live demo
HTML
<ul id="main-menu" class="main-menu">
<li>Home</li>
<li class="has-children">
About
<ul class="sub-menu is-hidden">
<li class="go-back">Pricing</li>
<li><a href="#" >Contact Us</a></li>
<li class="has-children">
hard goods
<ul class="sub-menu is-hidden">
<li class="go-back">Clothing</li>
<li>Beanies</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" >Services</a></li>
<li><a href="#" >Contact Us</a></li>
</ul> <!-- end main-menu -->
JS
//open submenu
$('.has-children').on('click', function(event){
var selected = $(this);
if( $('.has-children > ul', selected).hasClass('is-hidden') ) {
$('> a', this).addClass('selected');
$('> ul', this).removeClass('is-hidden');
// selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
}
});
//submenu items - go back link
$('.go-back').on('click', function(){
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('moves-out');
});
The answer is that the code actually work.
The problem is that after the code added the class 'is-hidden' in this line $(this).parent('ul').addClass('is-hidden')..., this class removed by this line $('> ul', this).removeClass('is-hidden');.
When you click on .go-back the click event of .has-children firing too.
The key is to add event.stopPropagation()
$('.has-children').on('click', function(event){
var selected = $(this);
if( $('.has-children > ul', selected).hasClass('is-hidden') ) {
$('> a', this).addClass('selected');
$('> ul', this).removeClass('is-hidden');
// selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
}
});
//submenu items - go back link
$('.go-back').on('click', function(e){
event.stopPropagation()
$(this).parent('ul').addClass('is-hidden');
});
.is-hidden {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul id="main-menu" class="main-menu">
<li>Home</li>
<li class="has-children">
About
<ul class="sub-menu is-hidden">
<li class="go-back">Pricing</li>
<li><a href="#" >Contact Us</a></li>
<li class="has-children">
hard goods
<ul class="sub-menu is-hidden">
<li class="go-back">Clothing</li>
<li>Beanies</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
<li>Watches</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" >Services</a></li>
<li><a href="#" >Contact Us</a></li>
</ul> <!-- end main-menu -->
</body>
</html>