javascript - 打开菜单时 mask /覆盖页面

Question

我的脚本有些问题，我想弄清楚如何在打开菜单时在网站上制作 mask /过滤器。在 HTML 中有一个名为 cmask 的类，还有一个名为 cmask is-active 的类只有当屏幕小于 900px 时才需要这样做。我一直在尝试使用 cmask.addClass("is-active") 和 removeclass 但它不能像那样工作并且它一直在崩溃(使脚本的另一部分不再工作)。有人知道我做错了什么吗？

//scrolling----------------
//scrolling----------------
//scrolling----------------
var nav = $("#nav_id");
var nav_overflow = $("#nav_overflow");
var page_end_logo_nav = $("#page_end_logo_nav").visible();
var logo_container = $("#logo_container");
var nav_ani_speed = 200 //in ms
var nav_state = 0 // 0 is nav  1 is hamburger visable
var hamburger = $("#hamburgermenu") //hamburger elemnt
var distanceY;
var shrinkOn;
var winkel_mand = $("#winkel_mand")

//set scroll for desktop nav
function nav_desktop_check() {
    distanceY = window.pageYOffset || document.documentElement.scrollTop;
    shrinkOn = 100;

    //run the header script
    if (distanceY > shrinkOn) {
        if (nav_state === 0) {
            nav_hamburger();
        }
    } else {
        if (nav_state === 1 ){
            if ($(window).width() >= 900){
                nav_normal_desktop();
            }
        }
    }
}

//tablet nav check
function tablet_nav_check() {
    if (nav_state === 0){
        if ($(window).width() <= 900){
        nav_hamburger();
        }
    }
}
tablet_nav_check()


//hambutton onclikc
hamburger.click(function() {
    if (nav_state === 1){
        if ($(window).width() >= 900){
        nav_normal_desktop();
        } else {
            nav_normal_mobile();
        }

        logo_animation();
        remove_winkel_icon_check()
    } else{
        nav_hamburger()
    }


});

//nav to hamburger
function nav_hamburger() {
    hamburger.removeClass("active")
        nav_overflow.animate({
        width: 0
      }, nav_ani_speed, function() {
            hamburger.addClass("active")
      });
    nav_state = 1;
    logo_animation();
}

//hamburger to nav
function nav_normal_desktop() {
    hamburger.addClass("active");
    hamburger.removeClass("active");
    nav_overflow.css("width", "auto");
    nav_witdh = nav_overflow.innerWidth();
    nav_overflow.css("width", 0);
    nav_overflow.animate({
        width: nav_witdh
    }, nav_ani_speed, function() {
        hamburger.removeClass("active")
    });
    nav_state = 0;

}
function nav_normal_mobile() {
    nav_overflow.animate({
        width: "100%"
    }, nav_ani_speed, function() {
        hamburger.removeClass("active")
    });
    nav_state = 0;
}

Answer 1

首先，我会在所有适合的语句中添加分号，以确保您没有遗漏强制分号。

我做了一个小的覆盖 mask 示例

Javascript

$('#element').on("click",function() {
  if($('#overlay').length == 0) {
        $(this).wrap('<div id="overlay"><div>');
  } else {
    $(this).unwrap();
  }

});

CSS

#element {
  width:200px;
  height:200px;
  background-color:#f00;
}

#inner {
  width:100px;
  height:100px;
  background-color:#0ff;
}

#overlay
{
  background-color:#000;
  opacity:0.3;
  width:200px;
  height:200px;
}

http://jsfiddle.net/5aw0wsy4/