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();

Jquery - 单击时将隐藏的div叠加在一起

2 个答案: