Question

我正在使用桌面上的响应式菜单查看普通的水平菜单，但当屏幕小于992px时，会出现一个汉堡包式按钮，用于切换推入式侧边菜单。

我面临的问题是，调整窗口大小时菜单会出现故障，即在桌面和移动视图之间切换。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<meta charset="utf-8"> 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="container">

我的css：

@media screen and (min-width: 992px) {

}

和我的js：

$(document).ready(function(){
    $('#mobile-icon').click(function(){
        $(this).toggleClass('closed');
    });

    $('.expander-icon').click(function(){
        $(this).parent().toggleClass('active-menu');

    });

});

$(window).on('load resize', function () {
    var screenWidth = $( window ).width();
    if(screenWidth < 992){
        $('.u').addClass('isMobile');

        $('#icon').click(function(){
            $(this).toggleClass("open closed");
            if($( "#con" ).hasClass( "open" )){
                $('.gation').css('margin-left',"0");

            }
            else{
                $('.asdn').css('margin-left',"-70%");
            }
        });


    }
});

Answer 1

我不知道我是否完全理解你在这里要做的事情，但我看到的第一个问题是你在调整窗口大小的同时不断向mr-mobile-icon添加点击事件。这些点击事件不会删除现有的点击事件，而是会叠加。调整窗口大小后，您可能在mr-mobile-icon上有数百个点击事件，这些事件都告诉浏览器更改css属性。

您需要从窗口调整大小和加载事件中删除click事件分配，并使用您已经在document.ready中获得的那个。如果将screenWidth变量的范围设置为可全局访问，则可以在单击函数中使用它。

以下是我建议的基本示例，删除了其他代码：

var screenWidth = $( window ).width();

$(document).ready(function(){

    $('#mr-mobile-icon').click(function(){
         if(screenWidth < 992) {
           // do whatever needs to happen for mobile
        } else {
            // do whatever needs to happen for desktop
        }
    });

});

$(window).on('resize', function () {
    screenWidth = $( window ).width();
});

Answer 2

简化您的JS，将所有可能的内容移至CSS。而不是修改JS中留下的边距，而是在CSS中执行，并且只要在open上切换类mr-mobile-icon，就可以在mr-navigation上切换它。您的$(window).on('load resize', ... );是不必要的。只需删除它，让CSS为您做一切。

CSS：

@media screen and (max-width: 991px) {
    .mr-navigation {
        // style
        margin-left: -70%;
    }
    .mr-navigation.opened {
        margin-left: 0;
    }
}

JS：

$('#mr-mobile-icon').click(function(){
    $(this).toggleClass('open');
    $('.mr-navigation').toggleClass('open');
});

我的响应式菜单变得粗糙

2 个答案: