在safari中我的滑动导航有一些问题。基本上它只是不起作用。在检查器面板中，它返回错误：
“TypeError：null不是对象（评估'document.getElementById（”contracted-menu“）。style'）
以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cuttsy+Cuttsy | How we work</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/fonts/fonts.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<script src="js/menu.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
function openNav() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
function openNav() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
</head>
<body>
<!-- ======================
========== MENU ===========
======================= -->
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png" alt="back arrow">
</a>
<a href="index.html">
<img src="images/Cuttsy+Cuttsy_Logo_Square_RGB.png" class="logo" alt="cuttsy and cuttsy logo">
</a>
<a href="who-we-are.html">who we are</a>
<img src="images/Line.png" class="menu-line" alt="line">
<a href="how-we-work.html">how we work</a>
<img src="images/Line.png" class="menu-line" alt="line">
<a href="what-we-do.html">what we do</a>
<img src="images/Line.png" class="menu-line" alt="line">
<a href="who-we-do-it-for.html">who we do it for</a>
<img src="images/Line.png" class="menu-line" alt="line">
<a href="cuttings.html">cuttings</a>
<img src="images/Line.png" class="menu-line" alt="line">
<a href="join-us.html">join us</a>
<img src="images/Line.png" class="menu-line" alt="line">
<a href="contact.html">contact</a>
<div class="socialmedia">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" alt="twitter logo">
</a>
</div>
<div class="privacy">
<p><a href="privacy.html">Privacy policy</a></p>
<p>© Cuttsy+Cuttsy 2018</p>
</div>
</div>
<!-- ======================
======= SMALL MENU ========
======================= -->
<div class="contracted-menu" id="contracted-menu">
<a href="javascript:void(0)" onclick="openNav()">
<img src="images/nav-icons/menu.png" class="burger" alt="open menu">
</a>
<div class="menu-icons">
<a href="who-we-are.html">
<img src="images/nav-icons/Who-we-are.png" alt="who we are">
</a>
<a href="how-we-work.html">
<img src="images/nav-icons/How-we-work.png" alt="how we work">
</a>
<a href="what-we-do.html">
<img src="images/nav-icons/What-we-do.png" alt="what we do">
</a>
<a href="who-we-do-it-for.html">
<img src="images/nav-icons/who-we-do-it-for.png" alt="who we do it for">
</a>
<a href="cuttings.html">
<img src="images/nav-icons/cuttings.png" alt="cuttings">
</a>
<a href="join-us.html">
<img src="images/nav-icons/join.png" alt="join us">
</a>
<a href="contact.html">
<img src="images/nav-icons/contact.png" alt="contact us">
</a>
<div class="socialmedia-sm">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" class="sm-small" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" class="sm-small" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" class="sm-small" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" class="sm-small" alt="twitter logo">
</a>
</div>
</div>
</div>
<!-- ======================
========= CONTENT =========
======================= -->
<div class="webcontent">
<div id="main">
<div>
<div class="row" class="col-sm-12">
<h1>How we work.</h1>
<p class="intro">At Cuttsy and Cuttsy, we never lose sight of what really matters – people. That’s why we pride ourselves on developing close and mutually respectful relationships with our clients. It’s why we constantly keep in mind what the patient or end-user really needs to know. And it’s why we work hard to maintain an award-winning culture of professional development to attract the very best people we can to join our team.</p>
</div>
<div class="secNav">
<ul>
<a href="how-we-work.html"><li class="subButton">Emotional Intelligence</li></a>
<a href="co-create.html"><li class="subButton">Co+Create</li></a>
<a href="health-literacy.html"><li class="subButton">Health Literacy</li></a>
</ul>
<ul class="secNav-level2">
<a href="compliance.html"><li class="subButton">Compliance</li></a>
<a href="CSR.html"><li class="subButton">CSR</li></a>
</ul>
</div>
<div class="row">
<hr class="dividingline">
<h2>Emotional Intelligence</h2>
<div class="col-sm-10">
<p id="intro-body">Emotional Intelligence (EI) is the capability of individuals to recognise their own and other people’s emotions and use emotional information to guide thinking and behaviour.</p>
<p class="body-copy">
One of our guiding principles is the power of EI. By guiding our thinking and behaviour, EI helps us to build meaningful and impactful connections in our communications.</p>
<h3>EI guides what we do</h3>
<img src="images/emotional-intelligence.png" class="bodyimg">
<hr class="dividingline">
<img src="images/reason-emotion.png" class="bodyimg">
<p class="body-copy" style="padding-top:30px;">
If you would like to find out more about how we use EI to guide our processes, <a href="#">let’s talk.</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="global-footer">
<div class="footer-nav col-sm-10">
<div class="col-sm-3">
<ul>
<a href="index.html"><li>Home</li></a>
<a href="who-we-are.html"><li>Who we are</li></a>
<a href="team.html"><li>Meet the Team</li></a>
<a href="CPD.html"><li>CPD</li></a>
<a href="How-we-work.html"><li>How we work</li></a>
<a href="co-create.html"><li>Co+Create</li></a>
</ul>
</div>
<div class="col-sm-3">
<ul>
<a href="health-literacy.html"><li>Health Literacy</li></a>
<a href="compliance.html"><li>Compliance</li></a>
<a href="CSR.html"><li>CSR</li></a>
<a href="what-we-do.html"><li>What we do</li></a>
<a href="books.html"><li>Books</li></a>
<a href="who-we-do-it-for.html"><li>Who we do it for</li></a>
</ul>
</div>
<div class="col-sm-3">
<ul>
<a href="cuttings.html"><li>Cuttings</li></a>
<a href="join-us.html"><li>Join us</li></a>
<a href="contact.html"><li>Contact</li></a>
<a href="privacy.html"><li>Privacy policy</li></a>
</ul>
</div>
</div>
</footer>
</html>
有人有什么想法吗？这是脚本标记之间不想工作的代码。
答案 0 :(得分：0)
将您的函数分配给这样的变量：
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
var openNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
var openNav = function() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>