Jquery - 单击时将隐藏的 div 堆叠在彼此之上

Question

因此，当单击隐藏的 div 上的选项卡向下滑动时，我希望发生什么，但无论单击哪个选项卡，它总是会在前一个选项卡的顶部打开。现在，它们按照 HTML 中的顺序打开。这是 Jquery `

$(document).ready(function ($) {

$('.menu-bio').bind('click', function (event) {
    if ($('#bio').is(':visible')) {
        $('#bio').slideUp();
        $('.menu-bio').removeClass('open');
    } else {
        if ($('#media').is(':visible')) {
            $('#media').slideDown(function () {
                $('#bio').slideDown();
                if($('.dropmenu').first().attr('id') != 'bio') $('#bio').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#dates').is(':visible')) {
            $('#dates').slideDown(function () {
                $('#bio').slideDown();
                if($('.dropmenu').first().attr('id') != 'bio') $('#bio').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#contacts').is(':visible')) {
            $('#contacts').slideDown(function () {
                $('#bio').slideDown();
                if($('.dropmenu').first().attr('id') != 'bio') $('#bio').insertBefore($('.dropmenu')[0]);           
            });
        } 
        else {
            $('#bio').slideDown();
        }

        $('.menu-bio').addClass('open');
    }
    return false;
});

$('.menu-media').bind('click', function (event) {
    if ($('#media').is(':visible')) {
        $('#media').slideUp();
        $('.menu-media').removeClass('open');
    } else {
        if ($('#bio').is(':visible')) {
            $('#bio').slideDown(function () {
                $('#media').slideDown();
                if($('.dropmenu').first().attr('id') != 'media') $('#media').insertBefore($('.dropmenu')[0]);
            });
        } 
        if ($('#dates').is(':visible')) {
            $('#dates').slideDown(function () {
                $('#media').slideDown();
                if($('.dropmenu').first().attr('id') != 'media') $('#media').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#contacts').is(':visible')) {
            $('#contacts').slideDown(function () {
                $('#media').slideDown();
                if($('.dropmenu').first().attr('id') != 'media') $('#media').insertBefore($('.dropmenu')[0]);           
            });
        } 
        else {
            $('#media').slideDown();
        }
        $('.menu-media').addClass('open');
    }
    return false;
});

$('.menu-dates').bind('click', function (event) {
    if ($('#dates').is(':visible')) {
        $('#dates').slideUp();
        $('.menu-dates').removeClass('open');
    } else {
        if ($('#bio').is(':visible')) {
            $('#bio').slideDown(function () {
                $('#dates').slideDown();
                if($('.dropmenu').first().attr('id') != 'dates') $('#dates').insertBefore($('.dropmenu')[0]);

            });
        } 
        if ($('#media').is(':visible')) {
            $('#media').slideDown(function () {
                $('#dates').slideDown();
                if($('.dropmenu').first().attr('id') != 'dates') $('#dates').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#contacts').is(':visible')) {
            $('#contacts').slideDown(function () {
                $('#dates').slideDown();
                if($('.dropmenu').first().attr('id') != 'dates') $('#dates').insertBefore($('.dropmenu')[0]);           
            });
        } 
        else {
            $('#dates').slideDown();
        }
        $('.menu-dates').addClass('open');
    }
    return false;
});

$('.menu-contacts').bind('click', function (event) {
    if ($('#contacts').is(':visible')) {
        $('#contacts').slideUp();
        $('.menu-contacts').removeClass('open');
    } else {
        if ($('#media').is(':visible')) {
            $('#media').slideDown(function () {
                $('#contacts').slideDown();
                if($('.dropmenu').first().attr('id') != 'contacts') $('#contacts').insertBefore($('.dropmenu')[0]);

            });
        } 
        if ($('#dates').is(':visible')) {
            $('#dates').slideDown(function () {
                $('#contacts').slideDown();
                if($('.dropmenu').first().attr('id') != 'contacts') $('#contacts').insertBefore($('.dropmenu')[0]);         
            });
        } 
        if ($('#bio').is(':visible')) {
            $('#bio').slideDown(function () {
                $('#contacts').slideDown();
                if($('.dropmenu').first().attr('id') != 'contacts') $('#contacts').insertBefore($('.dropmenu')[0]);         
            });
        } 
        else {
            $('#contacts').slideDown();
        }
        $('.menu-contacts').addClass('open');
    }
    return false;
});


$('.openbox').bind('click', function (event) {
    if ($(this).parent().hasClass('open')) {
        $(this).next('ul').slidedDown('fast');
        $(this).parent().removeClass('open');
    } else {
        $(this).next('ul').slideUp('fast');
        $(this).parent().addClass('open');
    }
    return false;
});
});

如果有人可以帮助我，我将不胜感激，谢谢

Answer 1

这行代码的作用是在其他元素之前插入您定义的 #bio、#media 或 #dates 元素。只需编辑下面的行即可。

$('#bio').insertBefore($('.dropmenu')[0]);
$('#media').insertBefore($('.dropmenu')[0]);
$('#dates').insertBefore($('.dropmenu')[0]);

Answer 2

使用 insertAfter 在向下滑动之前将容器插入到包装器之后：

$('#bio').insertAfter('.wrapper').slideDown();