jQuery隐藏/显示div onclick范围

我试图让一个项目的jQuery的摆动，我拿起一些东西在这里那里，但每隔一段时间，我打了一个笨蛋。jQuery隐藏/显示div onclick范围

在此的jsfiddle你可以看到我的工作：http://jsfiddle.net/YpeeR/17/

jQuery(document).ready(function() { 
jQuery('.toggle_hide').hide(); 

jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() { 
    var $this = $(this); 
    $('.toggle_hide').not($this.next("div")).fadeOut(200, function() { 
     $this.next("div").fadeIn(200); 
    }); 
});

}）;

我有4个div隐藏在li元素中。当用户点击div元素内部的span标签和其他div被关闭时，div会显示出来。这工作正常，但我想用户能够切换当前股利。

所以，当用户点击li元素中的跨度时，隐藏的div会显示出来，而当用户再次单击相同的跨度时，我希望div再次隐藏。

不幸的是fadeToggle似乎并没有这样的伎俩propper，你可以在这里看到http://jsfiddle.net/YpeeR/18/，但我似乎无法弄清楚这是为什么......

来源

2011-08-20 Peter Boomsma

我可以看到你了解如何**堆栈溢出* ***作品！ '问题'... jsFiddle ...评论...现在告诉我们...是否很难接受答案？ –

我放慢下来以显示更改：http://jsfiddle.net/YpeeR/23/

jQuery(document).ready(function() { 
    jQuery('.toggle_hide').hide(); 

    jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() { 
     var $this = $(this); 
     $this.next("div").fadeToggle(200); 
     $('.toggle_hide').not($this.next("div")).fadeOut(800); 
    }); 
})

你分别致电$this.next("div").fadeIn(200); 3次，每次DIV，而不是$ this.next，一旦他们完成的动画。

来源

2011-08-20 16:22:16 Joe

Wauw谢谢！这样做的窍门是，这个jQuery非常棒，但有点讨厌bugfix，但今天学到了很多东西。 –

@彼得，没问题！乐意效劳。请阅读：http://meta.stackexchange.com/questions/16721/how-does-accept-rate-work – Joe

由于您将fadeToggle放置在其他div的fadeOut的回调中，因为存在其他三个div，所以这被称为三次。所以它每次点击三次，你会看到它闪烁一次。试试这个：

jQuery(document).ready(function() { 
    jQuery('.toggle_hide').hide(); 

    jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() { 
     var $this = $(this); 
     $('.toggle_hide').not($this.next("div")).fadeOut(200); 
     $this.next("div").fadeToggle(200); 
    }); 
});

http://jsfiddle.net/Paulpro/YpeeR/25/

来源

2011-08-20 16:26:38 Paulpro

jQuery隐藏/显示div onclick范围

回答

相关问题