Question

我有一小段jQuery代码（在一些SOmembers的帮助下），但它只是错过了我的最后一块拼图。我将尝试解释它是如何工作的以及最终应该做些什么。

所以前两行很容易，这会隐藏所有带有类名的元素.toggle_hide

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

这行代码使得div＃background-absolute_content中的li内部的span元素是可点击的，因此我可以在该span标记上有一个函数。

    $("#background_absolute_content li span").css('cursor', 'pointer').click(function(){

这里有点难以向我解释，但我会尝试。我真的不知道这对我的代码有什么影响，我认为它是一个选择器吗？

var $this = $(this);

单击span元素时，此部分fadeOut包含类.toggle_hide的元素

                $('.toggle_hide').fadeOut(200, function(){

在完成fadeOut之后，这个fadeIn会启动，以便显示div。它选择了“this”里面的div，我认为它是跨度所在的li。

                $this.next("div").fadeIn(200);
            });
    });
});

所以我认为我已经解决了这个问题，但问题是需要显示的div会因为fadeOut而在apearing之前快速闪烁。所以我需要一种方法来选择所有li元素，除了那个包含当前span代码的元素，这样代码就不会影响（make flash）里面的div。但是当然需要展示......

我试图在jsFiddle上模拟问题 http://jsfiddle.net/YpeeR/7/

整个代码以便更好看。

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

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

Answer 1

这次锻炼：http://jsfiddle.net/amantur/EjAcZ/6/

我改变了：

$('.toggle_hide').fadeOut(200, function(){ 
     $this.next("div").fadeIn(200);
});

到

<击> $（ 'toggle_hide。'）淡出（200）;

<击>

<击> $ this.next（ “DIV”）淡入（200）;

var $this = $(this);
var $nxtDiv = $this.next("div");
$('.toggle_hide').not($nxtDiv).fadeOut(200);
$nxtDiv.toggle('slow');

这将首先隐藏所有div ~~（当前显示一个，当前一个已经隐藏）~~除了当前的一个然后 ~~show~~ 切换点击的一个。

编辑： - 我也更新了小提琴。

jQuery fadeOut其他div的li（除了点击的一个）

1 个答案: