html - 在一页上实现侧导航栏打开 - 在第二页上不起作用

问题描述

我已经搜索了论坛中的每个主题，但无法解决我的问题。我主要相信这是因为我是编码新手，可能还没有正确理解它。

请帮助下面的第二页是有这个问题的。侧面导航不起作用，它不会在页面上打开，代码如下。当您单击页面返回时，它也不会关闭。

   <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 个才能看到 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>

标签： htmlcssmaterializesidebar

html - 在一页上实现侧导航栏打开 - 在第二页上不起作用

问题描述

解决方案

推荐阅读