我已经搜索了论坛中的每一条线索,但无法解决我的问题。我主要相信这是因为我对编码还不太熟悉,可能还没有完全理解它。
请帮助下面的第二页是这个问题。侧导航不工作-在下面有代码的页面上不打开。而且当您单击页面上的“上一步”时,它也不会关闭。

   <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中不工作
这两个是需要看到代码笔工作
<!--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/

10-12 12:26