I created a ul containing li elements. I want to to slide down a div when a link in the same li is clicked.
The problem is when I click the link all divs are shown.
I use PHP for setting the id on each link.
The html code is here:
<li class='post'>
<div class='link'>
</div>
<div class='slidedown'>//here is what I want to sliding</div>
</li>
The jQuery code is here :
$(".link a").click(function(){
var id_post = $(this).attr("id");
$(".slidedown").slideDown("slow");
return false;
});
You can do it even more easy:
jQuery
$('.link').on('click', function() {
$(this).parent().find('.slidedown').slideDown('slow');
});
Or you use:
$('.link a').on('click', function() {
$(this).closest('.slidedown').slideDown('slow');
});
Go to .closest() or .parent() at jQuery Docs to learn more.
Here's the code that works well:
$(".link").click(function(){
$(this).siblings('.slidedown').slideDown('slow');
});
You can use parent() to move up a level and next() to target the next sibling:
$(".link a").click(function(){
$(this).parent(".link").next(".slidedown").slideDown("slow");
return false;
});
Or you can access the .post using closest() and target the .slidedown using find() or children():
$(".link a").click(function(){
$(this).closest(".post").find(".slidedown").slideDown("slow");
return false;
});
Use .parent() to move up one parent. Since the container were looking for is the .post we'll have to move up 2 parents. Then we can find the child of it that is .slidedown and slide that one down with .slideDown()
$(".link a").click(function(){
$(this).parent().parent().children('.slidedown').slideDown("slow");
});
Related
I want to slideUp all li element and slideDown li elements under current ul element
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$(this).children("li").slideDown();
$("li").slideUp();
e.stopPropogation();
});
this is the fiddle
Problem is it is sliding up everything in the end
What is the mistake i have done?
You need to target the LIs of all other navs excluding the current one, so use not:
e.g.
$(".nav").hover(function (e) {
$(this).children("li").slideDown();
$(".nav").not(this).find("li").slideUp();
e.stopPropogation();
});
JSDFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/46/
As you are having issues of overlapping actions, the usual "fix" is to stop prior animations so they at least do not chain and run to completion:
$(".nav").hover(function (e) {
$(this).children("li").stop(true,true).slideDown();
$(".nav").not(this).find("li").stop(true,true).slideUp();
e.stopPropogation();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/55/
You can separate your hover() event hook in to two calls, one for mouseenter and another for mouseleave. On mouseenter you want to slideDown() the li in the current ul. In the mouseleave, you want to make them all slideUp(). Try this:
$(".nav").hover(function () {
$(this).children("li").slideDown();
}, function() {
$("li").slideUp();
});
Updated fiddle
According to your code $(this).children("li").slideDown(); makes all li to slide down. And, $("li").slideUp(); will make all li slideup!!
Please do
$(".nav").hover(function (e) {
$(".nav").not(this).find("li").slideUp();
$(this).children("li").slideDown();
e.stopPropogation();
});
refer jQuery not
I added a class to fix this issue
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$("li").removeClass();
$(this).children("li").addClass("current").slideDown();
$("li:not(.current)").slideUp();
e.stopPropogation();
});
Fiddle link
I have some jquery to hide content on an index page.
the commented out code in the fiddle is what i have at the moment - but it hides all content divs if any toggle link is clicked.
HTML
<div>
<h1>Dogs</h1>
<a class="toggle_group_name">∆</a>
</div>
<div class="group_name">
Dogs do this, that and something
</div>
<div>
<h1>Cats</h1>
<a class="toggle_group_name">∆</a>
</div>
<div class="group_name">
Cats do this, that and something different
</div>
jQuery
$(function() {
$('.toggle_group_name').click(function() {
$(this).parents("div").find('.group_name').toggle();
});
});
I want only the class immediately following the toggle link to be hidden/shown, but can't get it working. Have tried using parents, nextAll, and various other methods from similar examples I've found on SO, but so far nothing has worked.
The target element is not sibling or parent of the clicked element, it's next sibling of the clicked element's parent, so .parents() and .nextAll() methods are not useful in this case, you can use .closest()/parent() and .next() methods:
$(this).closest('div') // closest parent div of the clicked element
.next('.group_name') // it's next .group_name sibling
.toggle();
http://jsfiddle.net/xUgG5/
This seems to work in your fiddle:
$(function() {
$('.toggle_group_name').click(function() {
$(this).parents("div").next('.group_name').toggle();
});
});
Just use first().
http://jsfiddle.net/P6GEC/9/
$(function () {
$('.toggle_group_name').click(function () {
$('.group_name').first().toggle();
});
});
http://api.jquery.com/first/
I have this code in my html
<span id="u_0_10">You can also <a rel="my_Feed" href="#" ajaxify="send_notify?Qid=10&part=99">feed</a>Send me this feed</span>
I want to know can I find that anchor with jQuery and fire its onclick in jQuery?
You can do it like this,
Live Demo
$('#u_0_10 a').click(function(){
alert($(this).text());
});
$('#u_0_10 a').click();
You can learn more about jQuery selectors and click event here.
This css should work.
"span#u_0_10 a"
$('#u_0_10 > a').each(function() {
// do your stuff
});
Since noone clicked the link I'll do it
$('#u_0_10 > a').trigger("click")
try this code
For particular span with id myId
$('#myId a').click(function() {
/ process click event here
});
For all the span with css myKlass
$('.myKlass a').click(function() {
/ process click event here
});
For All the span
$('span a').click(function() {
/ process click event here
});
I have the following UL:
<ul class="xbreadcrumbs" style="position:absolute; bottom:0px">
<li>A Crumb</li>
</ul>
This is being dynamically created by my javascript. How can I override the click for each LI that is inside of a UL called xbreadcrumbs in jQuery and have it do something instead of go to a new hyperlink?
Also, how can I get the behavior to be different for each li?
Updated:
$.each('.xbreadcrumbs li', function(){
$(this).live('click',function(e){
e.stopPropagation();
console.log('clicked for each li');
});
});
Live is part of the answer, the other part of the answer is that you need to use the event's target property to know which element was actually clicked.
$('.xbreadcrumbs li').live('click', function(e){
e.preventDefault();
console.log('Clicked on element', e.target);
});
Once you add the ul dynamically to the DOM you could subscribe to the .click() event of the inner lis:
$('.xbreadcrumbs li').click(function() {
// do something when the li is clicked
});
you'll have to use the .live() function so that dynamically created elements get the event attached...
$("ul.xbreadcrumbs li").live("click", function() {
//do something
}
Use a live event:
$('.xbreadcrumbs li').live('click', function(){
//override here
});
Since the </ul> is being added dynamically it is best to use $.live() or $.delegate() like this:
$('.xbreadcrumbs li').live('click', function(e){
e.stopPropagation();
console.log('Clicked');
});
Hope this helps!
I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?
If anyone could explain each of these processes that would be great as Im trying to learn jQuery.
Code is here http://jsfiddle.net/kyllle/FtUdN/
Try this for the click:
$('#nav li a').click(function(){
$(this).toggleClass('active')
});
Fiddle: http://jsfiddle.net/maniator/FtUdN/3/
Click here to see a working demo: http://jsfiddle.net/rVhte/
$('#nav li a').toggle(
function() {
$('.active').removeClass('active');
$(this).addClass('active');
$("#nav li a").unbind('mouseenter mouseleave');
}, function() {
$(this).removeClass('active');
$('#nav li a').hover(function() {
$(this).fadeTo(200, 0.5).end();
}, function() {
$(this).fadeTo(200, 1.0).end();
});
});
Edit: disabled mouseover events after a link is clicked
You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.
Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/