jquery - 使用 z-index 组织滑动 Div？

Question

请看这个 fiddle http://jsfiddle.net/V2JJ4/

这里我有隐藏的 div，可以滑动切换打开和关闭。

所有链接在每个 div 中都可用，因此用户可以切换当时打开的任何 div。然而，它们都位于不同的层上，例如，如果用户切换打开“imagesDiv”，然后单击其他链接之一，则看不到另一个 div 打开。

我如何组织这些 Div，以便切换哪个 div 时它会在打开的 Div 顶部滑动打开？我使用 z-index 吗？

JavaScript

$(document).ready(function() {
    $('.hidden').hide()
});

$('.soundDiv-link').click(function() {
    $('#soundDiv').slideToggle("slow")
});

$('.videoDiv-link').click(function() {
    $('#videoDiv').animate({width: 'toggle'}, "slow")
});

$('.imagesDiv-link').click(function() {
    $('#imagesDiv').animate({width: 'toggle'}, "slow")
});

HTML

<a class="soundDiv-link" href="#" >sound-link</a>
<a class="videoDiv-link" href="#" >video-link</a>
<a class="imagesDiv-link" href="#" >images-link</a>

<div class="hidden" id="soundDiv">
    <a class="soundDiv-link" href="#" >sound-link</a>
    <a class="videoDiv-link" href="#" >video-link</a>
    <a class="imagesDiv-link" href="#" >images-link</a>
</div>

<div id="videoDiv">
    <a class="soundDiv-link" href="#" >sound-link</a>
    <a class="videoDiv-link" href="#" >video-link</a>
    <a class="imagesDiv-link" href="#" >images-link</a>
</div>

<div id="imagesDiv">
    <a class="soundDiv-link" href="#" >sound-link</a>
    <a class="videoDiv-link" href="#" >video-link</a>
    <a class="imagesDiv-link" href="#" >images-link</a>
</div>

Answer 1

您可以通过更改代码以始终使最后选择的 div 位于顶部来修复:

var curZTop = 0;

$(document).ready(function () {
    $('.hidden').hide()
});

$('.soundDiv-link').click(function () {
$('#soundDiv').css("z-index", curZTop++);    $('#soundDiv').slideToggle("slow");

});

$('.videoDiv-link').click(function () {
    $('#videoDiv').css("z-index", curZTop++);    
    $('#videoDiv').animate({
        width: 'toggle'
    }, "slow")
});

$('.imagesDiv-link').click(function () {
    $('#imagesDiv').css("z-index", curZTop++);
    $('#imagesDiv').animate({
        width: 'toggle'
    }, "slow")
});

编辑:这是 fiddle http://jsfiddle.net/eJ3tf/