Question

这里我隐藏了滑动切换打开和关闭的div。

所有链接在每个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")
});

编辑：这是小提琴http://jsfiddle.net/eJ3tf/

Answer 2

我正在使用这个jquery用于同样的目的。

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

$('.soundDiv-link').click(function() {
    $('#videoDiv, #imagesDiv').css('z-index', 1);
    $('#soundDiv').css('z-index', 2).slideToggle("slow")
});

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

$('.imagesDiv-link').click(function() {
  $('#videoDiv, #soundDiv').css('z-index', 1);
  $('#imagesDiv').css('z-index', 2).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>

<强> CSS：

.hidden {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;

}
#soundDiv {
    background-color: #000;
}
#videoDiv {
    background-color: #666;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    display: none;
}
#imagesDiv {
    background-color: yellow;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    display: none;
}
.soundDiv-link, .videoDiv-link, .imagesDiv-link {
    position:absolute;
}
.soundDiv-link {
    top: 10px;
    left: 10px;
}

.videoDiv-link {
    top: 50px;
    left: 100px;
}

.imagesDiv-link  {
    top: 100px;
    left: 200px;
}

考试http://jsfiddle.net/V2JJ4/4/

使用z-index组织Sliding Divs？

2 个答案: