我的响应式菜单出现故障答案

【问题标题】：My responsive menu gets gliched我的响应式菜单出现故障
【发布时间】：2017-07-07 02:55:26
【问题描述】：

我正在开发我的响应式菜单，该菜单将在桌面上查看正常的水平菜单，但是当屏幕小于 992 像素时，会出现一个汉堡样式按钮，该按钮将切换一个推入式侧边菜单。

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

这是我的代码：

<!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%");
            }
        });


    }
});

【问题讨论】：

菜单“故障”是什么意思？
“桌面”菜单在我从移动分辨率调整大小后不会显示，反之亦然，或者移动菜单按钮在点击时不会执行任何操作，它会自动出错

标签： javascript jquery html css

【解决方案1】：

简化您的 JS，将所有内容移至 CSS。不要在 JS 中修改剩余边距，而是在 CSS 中进行，每当您在 mr-mobile-icon 上切换类 open 时，也要在 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】：

我不知道我是否完全理解您在此处尝试执行的操作，但我看到的第一个问题是您在调整窗口大小时不断向 mr-mobile-icon 添加点击事件。这些点击事件不会删除现有的点击事件，它们会堆叠。调整窗口大小后，您可能会在 mr-mobile-icon 上出现数百个点击事件，它们都在告诉浏览器更改 css 属性。

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

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

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

【讨论】：