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

标签 html css materialize sidebar

我搜索了论坛中的每个帖子,但无法解决我的问题。我主要认为这是因为我是编码新手,也许还没有正确理解它。

请帮助下面的第二页是有此问题的页面。侧面导航不起作用,它无法使用下面的代码在页面上打开。而且当您单击返回页面时它也不会关闭。

   <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/

相关文章:

html - 在可折叠的内部实现 CSS 复选框

css - Materialise css 1.0 嵌套下拉菜单

javascript - 实现选择不工作附加选项

html - 标记端未显示

css - 如何创建一个与 IE、FF 和 Chrome 兼容的位置固定的 div

html - 居中文字和图片

javascript - 从超链接中删除 tabindex 属性

javascript - 选择箭头样式更改时 <选择多个 ="multiple">

javascript - 如何通过javascript禁用浏览器另存为(文件->另存为)?

jQuery 将颜色分配给 li 列表