页面切换脚本问题

Question

这是我的第一个堆栈溢出帖子，所以我希望我能满足一个好主题的要求。但是，我是法国人，因此，如果某些内容无法正确解释，我深表歉意。

只是让您知道，我对Web开发还是很陌生。几个月前，我开始学习html ccs JavaScript（+ JQuery）的基础知识，而且工作了一个月。然后，我开始为2个抽彩流开发一个网站（观看者的平均观看量很少）。如果您想检查，请点击以下链接（这样您就可以看到我在说的问题）：ponceriv.fr

如果网站很轻巧，我决定制作一个“单页”结构，因为我使用的是单个html文件（index.html），并且我使用Jquery操纵DOM来切换页面。 / p>

这是脚本的一部分（您可以直接在core-handler.js中检入）：

// When the user clicks on a nav button
$('.nav-item-container').click(function () {
    //remove the Nav-active class from nav button previously active
    $('.nav-item-container').removeClass('nav-active');
....
....
    // the clicked nav button is the second one
    if ($(this).attr('id') == 'nav-item-container-2') {
        // the new active page is the second one / the "about" page
        let $newActiveWrapper = $('.about-wrapper');
        // the nav button that will have the active design
        let $toActiveNav = $('#nav-item-container-2');
        // Check if this page is already active
        if ($activeWrapper.attr('id') == $newActiveWrapper.attr('id')) {
            // re-set the class nav-active on the same button (I know, this is not optimal)
            $toActiveNav.addClass('nav-active');
            // If not already active
        } else {
            // The nav button get the 
            $toActiveNav.addClass('nav-active');
            // Prepare the css properties for the "enter" animation of the new page
            $newActiveWrapper.css({
                opacity: '0',
                position: 'relative',
                top: '100px',
                left: '0'
            });

            // Hide overflow because the animation makes scrollbar visible
            $('#content').css({
                'overflow': 'hidden'
            });

            // Check if the page is a secondary content (=/= stream player page) so we'll make the mini twitch player display
            if ($('.secondary-content').css('display') == 'none') {

                // Prepare the css properties for the "enter" animation of the mini player
                $('.twitch-mini-player').css({
                    opacity: '0'
                });

                // "Leaving" animation of the current page then "Enter" animation of the new page + Deleting the iframe of the twitch main player
                $activeWrapper.animate({
                    left: '600px',
                    opacity: '0'
                }, 500, function () {
                    $activeWrapper.css({
                        display: 'none'
                    });
                    $('.secondary-content').css({
                        display: 'flex'
                    });
                    $newActiveWrapper.css({
                        display: 'block'
                    });
                    $newActiveWrapper.animate({
                        opacity: '1',
                        top: '0'
                    }, 500);
                    $('#twitch-embed').remove();
                });

                // New "state" variable values + display mini player + "enter" animation of mini player
                setTimeout(function () {
                    $activeNav = $toActiveNav;
                    $activeWrapper = $newActiveWrapper;
                    $('.twitch-mini-player').append(twitchPlayerSnippet);

                    // calling a function declared somewhere else in the script
                    displayTwitch();
                    $('#content').css({
                        'overflow': 'visible'
                    });
                    $('.twitch-mini-player').delay(250).animate({
                        opacity: '1'
                    });
                }, 1050);

            // If we were already in a secondary content
            } else {

                //pretty much the same than earlier but without main player and mini player modifications
                $activeWrapper.animate({
                    left: '600px',
                    opacity: '0'
                }, 500, function () {
                    $activeWrapper.css({
                        display: 'none'
                    });
                    $newActiveWrapper.css({
                        display: 'block'
                    });
                    $newActiveWrapper.animate({
                        opacity: '1',
                        top: '0'
                    }, 500);
                });

                setTimeout(function () {
                    $activeNav = $toActiveNav;
                    $activeWrapper = $newActiveWrapper;
                    $('#content').css({
                        'overflow': 'visible'
                    });
                }, 1050);
            }
        }
    }

在其他页面上还有3个其他这样的脚本。

这就是问题，如果您快速单击一个辅助内容的导航按钮，然后单击另一个，则两个页面都将显示，将网站内容框架分成2个50％宽度的框架。

几天来我一直在寻找导致此问题的原因，但我真的不知道...

我知道所有这一切实际上都是次优的，但这是本网站的“目的”，从非常基础的知识开始，并在学习新事物时逐步进行升级。