<li class="page_item ">A
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
</ul>
</li>
<li class="page_item ">B
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
$('.children a').click(function(event){
event.stopPropagation();
$('ul.children').prev().css('background','red');
});
ONLINE SAMPLE: http://jsfiddle.net/uybPf/
I'd like to achieve when I click A or B's submenu, and then A or B will be highlighted. but my code highlighted all of them. I don't want to use toggleClass() could someone please help to fix my code. Thanks
That's because you're using ul.children which will perform the code for every element in that set. Try this instead:
$('.children a').click(function(event){
event.stopPropagation();
$("ul.children").prev().css('background','none');
$(this).closest("ul.children").prev().css('background','red');
});
DEMO: http://jsfiddle.net/uybPf/6/
$('.children a').click(function(event) {
event.stopPropagation();
$(this).closest('ul.children').prev().css('background', 'red');
});
http://jsfiddle.net/uybPf/2/
You should use closest or parent methods:
$('.children a').click(function (event) {
event.stopPropagation();
$('.page_item a').removeClass('highlight'); // remove previously active class
$(this).closest('.children').prev().addClass('highlight');
});
http://jsfiddle.net/uybPf/3/
You should better use addClass and removeClass methods instead of css since you already defined .highlight class in CSS.
Try this
$('.children a').click(function(event){
event.stopPropagation();
$('>a:first', $(this).closest('.children').closest('.page_item')).css('background', '#f00')
});
This however doesn't unhighlight the previously highlighted parent
After reading your question's comments, edit:
add
$('.page_item > a').css('background','transparent');
after
event.stopPropagation();
Try this
$('.children a').click(function (event) {
event.stopPropagation();
$(this).closest('ul.children').parent().children('a').css('background', 'red');
});
http://jsfiddle.net/uybPf/2/
Related
I have two buttons inside a list and I want to be able to switch a class between them on click.
I'm a beginner on Jquery and wrote some lines but it doesn't seem to work, even though everything is correctly linked according to Chrome's console.
Here's the html :
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
and here's the corresponding Jquery :
$('.tab a').click(function) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
Thanks in advance !
So it seems to be working now, partially, it doesn't work in my full HTML page but it does when using only the <ul>, so i'll redo it from the beginning and find where it goes wrong.
Thanks a lot for all of your answers !
You had a syntax error - it should be $('.tab a').click(function() {
If you want to use the event object (e.preventDefault() in your code) you should add it to the function declaration - function(e) {, otherwise the e variable is not defined.
Here is the fix to your code:
$('.tab a').click(function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
.active {
background: blue;
}
.active a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
I found a lot of questions about this, but I have problem with getting the single id of a nested li element, and I couldn't find answer for it. Here is my code:
$(function() {
$('ul').on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
And here is my HTML:
<ul id="u-main-ul">
<li id="1"> 1
<ul id="u-1">
<li id="11">11</li>
</ul>
</li>
</ul>
The problem is that when I right click on the li element with id="11", on the console it writes "1 11". When click one li element it shows and the id of all others li tags that are placed before the clicked one.
I want to get the id only of the right-clicked li tag and nothing else.
You need to stop the event from bubbling up the tree:
$('ul').on('contextmenu', 'li', function(e) {
e.preventDefault();
e.stopPropagation();
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="u-main-ul">
<li id="1">1
<ul id="u-1">
<li id="11">11</li>
</ul>
</li>
</ul>
See the documentation for more info.
Try it with stopPropagation() like so
$(function() {
$('ul').on('contextmenu', 'li', function(e) {
e.stopPropagation();
console.log(this.id);
})
});
See the JSFiddle
I have an accordion, and I'm able able to open on each click, but how can I close it back again?
HTML:
<ul class="accordion">
<li id="one" class="files">
Calendar 1<span>10</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>1</span></li>
</ul>
</li>
<li id="two" class="mail">
Calendar 2<span>20</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>2</span></li>
</ul>
</li>
<li id="three" class="cloud">
Calendar 3<span>30</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>3</span></li>
</ul>
</li>
<li id="four" class="sign">
Calendar 4
<ul class="sub-menu">
<li><em>01</em>Sub Menu</li>
</ul>
</li>
</ul>
Javascript:
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active') {
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
});
});
Fiddle: http://jsfiddle.net/fuuLh494/
You dont need to explicitly check for active class occurence and then do add/remove decision of class. You can achieve this with toggleClass:
accordion_head.on('click', function(event) {
event.preventDefault();
$('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
});
Working Demo
You can remove the if completely, and use both slideToggle and toggleClass:
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
Updated Fiddle
if ($(this).attr('class') != 'active'){
//accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
//accordion_head.removeClass('active');
$(this).addClass('active');
} else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
See the updated fiddle here: http://jsfiddle.net/9ev31v6w/
The best you can do with a tutorial is learn, and not copy&paste without read the code. It's as simple as this:
http://jsfiddle.net/fuuLh494/1/
I add else statement at the end of the script:
else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
Replace all instances of addClass with toggleClass and remove the condition of if class is active.
We are trying to remove the class when the class is already added using toggleClass() and don't need any if condition block.
accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed
Working JSfiddle
Am trying to add a onclick event to the a tag of particular li's which are under a ul with id #nav.
HTML Structure:
<ul id="nav">
<li>link1</li>
<li>
link2
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
<li>link3</li>
<li>
link4
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
</ul>
Jquery
$( document ).ready(function() {
$("ul#nav li").eq(1).children().first().click(function(){
$(this).attr('onclick', 'return false;');
return false;
});
$("ul#nav li").eq(5).children().first().click(function(){
$(this).attr('onclick', 'return false;');
return false;
});
});
If you see, am writing jQuery twice to select the a element of li item which has got another ul inside and add onclick event to it. This is working fine. But is there way to reduce my code and make it more clean?
So you don't want the li that contains an ul child to fire the click event so i think it would be like this
$('#nav li:has(>ul)').click(function (event) {
event.preventDefault();
alert('click');
});
fiddle can be found here: http://jsfiddle.net/552T4/3/
Hey you may be looking for this:
$("ul#nav li:has(>ul)")
$("ul#nav li:eq(1),ul#nav li:eq(5)").children().click(function(){
e.preventDefault();
var youClicked=$(this).text();
alert(youClicked);
});
Please try this.
$( document ).ready(function() {
$("#nav > li").each(function(){
$(this).find('a').attr('onclick', 'return false;');
});
});
Below is fiddle of this.
Js Fiddle
In above i apply "onclick" event to all anchor. if you want to apply only that li which has child ul then the code is something like this.
$( document ).ready(function() {
$("#nav > li").each(function(){
if($(this).find('ul').length>0)
{
$(this).find('a').attr('onclick', 'return false;');
}
});
});
below is the link for Li with Ul element selected.
li with ul onclick
Yea, Add ID's to the elements you need:
HTML Structure:
<ul id="nav">
<li>link1</li>
<li>
link2
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
<li>link3</li>
<li>
link4
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
</ul>
Jquery
$("#liOne, #liTwo").click(function(e){
e.preventDefault();
return false;
});
Or even a class, instead of id's.
This way, you only have to add the id / class attributes to the elements you want the click event to be handled on, instead of traversing the DOM like that.
I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.
is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});
Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})
This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});
Demo: http://jsfiddle.net/EJWnn/
Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".