Javascript 我的菜单变得油腻了_Javascript_Jquery_Html_Css

Javascript 我的菜单变得油腻了

javascript jquery html css

Javascript 我的菜单变得油腻了,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在处理我的响应菜单，该菜单将在桌面上显示为普通的水平菜单，但当屏幕小于992px时，将出现一个汉堡包式按钮，该按钮将切换推入式侧菜单我面临的问题是，在调整窗口大小（即在桌面视图和移动视图之间切换）时，菜单会出现故障这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <title>Menu</title> <meta charset="utf-8"> <!-- Lat

我正在处理我的响应菜单，该菜单将在桌面上显示为普通的水平菜单，但当屏幕小于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">

还有我的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%");
            }
        });


    }
});

$（文档）.ready（函数（）{
$（“#移动图标”）。单击（函数（）{
$（this.toggleClass（'closed'）；
});
$（'.expander图标'）。单击（函数（）{
$（this.parent（）.toggleClass（'active-menu'）；
});
});
$（窗口）.on（'load resize'，函数（）{
var screenWidth=$（窗口）.width（）；
如果（屏幕宽度<992）{
$（'.u'）.addClass（'isMobile'）；
$（“#图标”）。单击（函数（）{
$（此）.toggleClass（“打开-关闭”）；
如果（$（“#con”）.hasClass（“打开”））{
$（'.css'）.css（'margin-left'，'0'）；
}
否则{
$（'.asdn'）.css（'margin-left'，“-70%”）；
}
});
}
});

我不知道我是否完全理解您在这里试图做什么，但我看到的第一个问题是，在调整窗口大小时，您不断向mr mobile图标添加单击事件。这些单击事件不会擦除现有的单击事件，而是堆叠。调整窗口大小后，您可能会在mr mobile图标上有数百个单击事件，所有这些事件都会告诉浏览器更改css属性

您需要从窗口resize and load事件中删除click事件分配，只使用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();
});

var screenWidth=$（窗口）.width（）；
$（文档）.ready（函数（）{
$（“#mr移动图标”）。单击（函数（）{
如果（屏幕宽度<992）{
//为手机做任何需要做的事情
}否则{
//为桌面做任何需要做的事情
}
});
});
$（窗口）.on（'resize'，函数（）{
屏幕宽度=$（窗口）.width（）；
});

简化JS，尽可能将所有内容移动到CSS。不要修改JS中留下的边距，而是在CSS中进行操作，每当您在

mr移动图标上切换classopen
，也要在mr导航上切换它。您的$（窗口）.on（'load resize'，…）是不必要的。只要删除它，让CSS为你做一切
CSS:
JS:
菜单“小毛病”是什么意思？我从移动分辨率调整大小后，“桌面”菜单不会显示，反之亦然，或者移动菜单按钮在单击时不会做任何事情，这会让它自己出毛病谢谢！我真的很喜欢你的方法。
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();
});

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

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