Jquery - укладка скрытых элементов в верхней части друг друга при нажатии

Question

Так что я бы хотел, чтобы при нажатии вкладки на скрытых элементах div скользили вниз, но независимо от того, какая из них была нажата, она всегда будет открываться поверх предыдущей.Прямо сейчас они открываются в порядке, в котором они находятся, в HTML.Вот Jquery `

$ (документ) .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();