Question

我有2个菜单。它们都放在不同的位置。当我的屏幕达到一定宽度时，两个菜单都会消失，我将第二个菜单添加到顶部，两个菜单都有2个按钮。我遇到的问题是，当我将屏幕调整到更大的宽度时，我无法让第二个菜单返回到它的正确位置，而不是在调整大小时将second_menu一遍又一遍地重复，

我的HTML

<div class="row">
    <div class="col-lg-12">
        <div class="inside_scroll">
            <div class="inside_menu">
                <div class="lang_menu_mobile"></div>
                <div class="toggle_wrapper"></div>
                <div class="home_small_logo"></div>
                <div id="main-menu" class="collapse navbar-collapse main_menu main_menu_inside"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 second_menu_wrapper">
        <div class="col-lg-4 col-md-4">
            <div class="second_menu">
                <div id="second-menu" class="collapse navbar-collapse menu_two">
                    <ul class="nav navbar-nav inside-nav">
                        <li class="active_sub_menu">
                        <li class="sub_menu">
                        <li class="sub_menu">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我的JS

if($(window).innerWidth() < 753){
    console.log("load < 753");

    $(window).scroll(function(){
        if( $(window).scrollTop() > 0 ) {
            $('.inside_menu').addClass('navbar-fixed-top mobile_scroll_menu_inside').css({margin: '0 auto', width: '96%', 'border-top' : 'none', 'background' : '#f7f7f7', 'height' : '58px', 'padding-left' : '0', 'padding-right' : '0'}).prepend($(".second_menu").css({'position' : 'relative', 'top' : '46px'}));
            $('.home_small_logo').hide();
        } else {
            $('.inside_menu').removeClass('navbar-fixed-top mobile_scroll_menu_inside').css({width: '100%', 'border-top' : 'none', 'background' : 'none', 'padding-left' : '0', 'padding-right' : '0'});
        }
    });
}

if($(window).innerWidth() < 1200){
    console.log("resize < 1200");

    $('.inside_menu').removeClass('mobile_scroll_menu_inside').css({margin: '0 auto', width: '1024px', 'background' : '#ffffff'});
    $('.second_menu_wrapper .col-md-4').prepend($(".second_menu"));

    $(window).scroll(function(){
        if($(window).scrollTop() > 0 ) {
            $('.inside_menu').addClass('navbar-fixed-top').css({margin: '0 auto', width: '1024px', 'background' : '#ffffff'});
            $('.inside_menu').removeClass('mobile_scroll_menu_inside');
            $('.home_small_logo').show();
        } else {
            $('.inside_menu').removeClass('navbar-fixed-top').css({width: '100%', 'background' : 'none'});
        }
    });
}

if($(window).innerWidth() < 995){
    console.log("resize < 995");

    $(window).scroll(function(){
        if( $(window).scrollTop() > 0 ) {
            $('.inside_menu').addClass('navbar-fixed-top mobile_scroll_menu_inside').css({margin: '0 auto', width: '77.4%', 'border-top' : 'none', 'background' : '#e7e7e6', 'height' : '58px', 'padding-left' : '0', 'padding-right' : '0'}).prepend($(".second_menu").css({'position' : 'relative', 'top' : '46px'}));
            $('.home_small_logo').hide();
        } else {
            $('.inside_menu').removeClass('navbar-fixed-top mobile_scroll_menu_inside').css({width: '1024px', 'border-top' : 'none', 'background' : 'none', 'padding-left' : '0', 'padding-right' : '0'});
        }
    });
}

Answer 1

您需要将这些绑定到resize事件，如下所示：

$(window).resize(function(){
    //your code for menus.
});

尝试将代码包装在上面的块中。

把课程放回原来的地方

1 个答案: