我已经搜索了论坛中的每个主题，但无法解决我的问题。我主要相信这是因为我是编码的新手，也许还不太了解它。
请在下面的第二页帮助中解决此问题。侧面导航无效，无法在带有以下代码的页面上打开。并且当您单击该页面时它也不会关闭。
<body>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
索引页面，没有问题，但我已经检查了两个代码，找不到任何不同的地方。我唯一的问题是，除非您单击链接，否则它将保持打开状态；如果您单击返回页面，则希望将其关闭。
<body>
<!-- Header -->
<header class="main-header">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="#About">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="#About">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
感谢您的帮助。
更新：sideNav在codepen.io/Bjorn_Ironside1986/pen/VRbyvL中有效，但在codepen.io/Bjorn_Ironside1986/pen/OqmOdR中无效
需要这2个代码才能正常工作
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
答案 0 :(得分：1)
我认为是因为您从未关闭标头标签。
答案 1 :(得分：1)
您需要一些JavaScript来初始化sidenav-在下面的代码中，我只是添加了从左侧打开侧面中殿的选项...单击左侧的菜单按钮。
希望它对您有用。
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'left'
});
});<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<a href="#user"><img class="circle" src="images/yuna.jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
</a>
</div>
<!-- Showcase -->
<div class="showcase container">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<h1>The Digital World</h1>
<h5>Solutions</h5>
</div>
</div>
</div>
</header>
<!-- Section: Solutions About -->
<section class="section section-solutions-about">
<div class="container">
<div class="row">
<div class="col s12 m5">
<h2>What We Do...</h2>
<p>Solutions are ways of solving problems, when you consider world issues today, everything boils down to Langauge, Maths, Technology and Science! If you consider what these represent, in one view that could be taken if we break them down it is merely
code in some form, structed together to create innovation.</p>
</div>
<div class="col s12 m6 offset-m1">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">
<a href="#tab1" class="purple-text">Web Devlopment</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Features -->
<section class="section section-features grey lighten-3">
<div class="container center">
<h4>
<span class="deep-purple-text text-darken-1 center">Powerful</span> & Innovative</h4>
<h6 class="grey-text text-darken-2 center">We aim to assist you, and provide quality of service to help you scale your business, capture new clients and retain existing customers with our desings!</h6>
<br>
<br>
<!-- Row 1 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-user"></i> User Friendly Applications
</h5>
<p>As a business the focus is on the client and the user to generate interest or purchase of services and products. We focus on functionality and accessability at the forefront of every desgin to ensure the user maintains interest. We ask you to
provide the information needed to explain your product or service which will allow the user to make an informed choice.</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-database"></i> Security of user and client Data
</h5>
<p>In today's society information is the new form of gold. We can advise you on policys such as EU GDPR and UK data protection laws. Depedning on your wesbites structure we will inform you of any products which may be of benfit to prevent cyber crime.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-chart-line"></i> Data Analytics
</h5>
<p>
Data helps devlope a business it can show growing trends or point out possible issues. With this information a business can takes steps to proctect both themsleves and their client but also it can assist them in devloping growth and expanding into new
sectors. We can advise on tools which can be helpful to your business in relation gathering data from users.</p>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-github"></i> Problem Solving
</h5>
<p>
Programing is not for everyone, that is why their are expereinced devlopers who offer services such a repair or managing sites. We can offer sulutions to problems with your site should the need arise. In some circumstances we may offer to manage your
site for a fee, this can be discussed further dpending your needs.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-plus"></i> Add-ons
</h5>
<p>Our main service is devlopment, we dont offer hosting services or provide domain names. We can put you in touch with some providers, depending on your business services. We dont offer graphic design. We source images which are free of royalty
and are licenced for commecial use to prevent any legal or copyright issues. But sometimes we have to use images from sources such as adobe stock therefore these are not free and will be added to the final invoice. </p>
</div>
<div class="col s12 m4">
<h5>
<i class="fas fa-desktop"></i> Website Design
</h5>
<p> We can offer a range of services in relation to desgin and devlopment. We can do "Landing Page" Mulitiple Page Design, One page design with different sections and E-commerce sites with a database. We can also build custome designs, all our projects
take time depending on complexity and nature of the project.</p>
</div>
</div>
<div class="center">
<h5>
<span class="deep-purple-text text-lighten-1">Have a question? </span> Contact our sales team
</h5>
<p>sales@lueurtech.co.uk</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="page-footer black lighten-1">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Us</h5>
<p class="grey-text text-lighten-4">Our company name "Lueur" is a french word which translates to "Glow" the more common use of the word is "lueur d'espoir" which means "Glimmer of Hope" it is in this meaning that our business looks to offer small business the chance to glow. We
take into consideration that everyone just wants to succeed in life and in business so our mission of course is to make a stable business but the main prespective is to give hope and help people grow!</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li>
<a class="grey-text text-lighten-3 " href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="index.html">About us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright deep-purple darken-1">
<div class="container">
<div> Lueur Tech © 2018</div><i class="fab fa-cc-paypal fa-3x grey-text text-lighten-3"></i>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-3x grey-text text-lighten-3"></i></a>
<p class="grey-text text-lighten-4 right " href="#!"> Terms | Legal | Privacy</p>
</div>
</footer>