我搜索了论坛中的每个帖子,但无法解决我的问题。我主要认为这是因为我是编码新手,也许还没有正确理解它。
请帮助下面的第二页是有此问题的页面。侧面导航不起作用,它无法使用下面的代码在页面上打开。而且当您单击返回页面时它也不会关闭。
<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 中不起作用
这两个是查看 codepen 工作所必需的
<!--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>
最佳答案
我认为这是因为你从未关闭标题标签。
关于html - 在一页上实现侧导航栏打开 - 在第二页上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55059679/