Question

我正在尝试为一个项目获取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/看到的那样做伎俩，但我似乎无法弄明白为什么......

Answer 1

我放慢速度以显示更改：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);
    });
})

你的动画完成后，你为每个div调用$this.next("div").fadeIn(200); 3次，而不是$ this.next。

Answer 2

它表现得很奇怪，因为你把fadeToggle放在其他divs的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/

jQuery hide / show div onclick span

2 个答案: