0

このフィドルを参照してくださいhttp://jsfiddle.net/V2JJ4/

ここでは、開閉を切り替えるスライド div を非表示にしています。

すべてのリンクは各 div で利用できるため、ユーザーはその時点で開いている div を切り替えることができます。ただし、それらはすべて異なるレイヤーに配置されており、たとえば、ユーザーが「imagesDiv」を開いてから他のリンクの 1 つをクリックすると、他の 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

コードを変更して、最後に選択した 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 に答える