jQuery hide / show div onclick span
我正在尝试为一个项目获得jQuery的摇摆，我在这里和那里拿起一些东西但是我时不时地打了个蠢蛋。
在这个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); }); }); }）;
我有一个隐藏在li元素中的4个div。 当用户点击div所在的li元素内的span标记并且其他div被关闭时，div会显示。 这工作正常，但我希望用户能够切换当前div。
因此，当用户单击li元素中的span时，将显示隐藏的div，当用户再次单击相同的span时，我希望div再次隐藏。
不幸的是，fadeToggle似乎并没有像你在http://jsfiddle.net/YpeeR/18/那样看到伎俩，但我似乎无法弄清楚为什么会这样……
我放慢速度以显示变化： 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); 每个div 3次，而不是$ this.next，一旦他们的动画完成。
它表现得很奇怪，因为你将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); }); });