0

请看这个小提琴http://jsfiddle.net/V2JJ4/

在这里，我隐藏了可以滑动切换打开和关闭的 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>
4

2 回答 2

0

我出于同样的目的使用这个 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/

于 2013-10-11T13:07:26.693 回答
0

您可以通过更改代码以始终使最后选择的 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/

于 2013-10-11T13:04:01.303 回答