jQuery 淡出其他 div 的 li（除了被单击的那个）

Question

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

所以前两行很简单，这隐藏了所有具有类名 .toggle_hide 的元素。

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

这行代码使得 div #background-absolute_content 内的 li 内的 span 元素可单击，因此我可以在其上拥有一个函数跨度标签。

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

在这里向我解释有点困难，但我会尝试。我真的不知道这对我的代码有什么作用，我认为它是某个东西的选择器？

var $this = $(this);

当单击 span 元素时，这部分会淡出一个具有 .toggle_hide 类的元素

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

，并且在淡出完成后，淡入会启动，以便显示 div。它选择“this”内的div，我认为它是span所在的li。

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

所以我想我已经解决了这个问题，但问题是需要显示的div在之前快速闪烁由于淡出而出现。因此，我需要一种方法来选择除包含当前 span 代码的元素之外的所有 li 元素，这样代码就不会影响（使其闪烁）内部的 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').fadeOut(200);

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

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

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

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