javascript - 响应式菜单，带有可点击的子菜单，可根据屏幕尺寸改变位置

Question

我对情况的最佳描述:

移动设备上的菜单是垂直的，桌面上的菜单是水平的。

.menu {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        @media (min-width: 768px) {
        flex-direction: row;        
        justify-content: space-between;
      };    
    }

第一个菜单链接是一个可单击的子菜单。这使情况变得复杂，因为这意味着需要复制子菜单，以便在移动设备上(当菜单是垂直时)子菜单位于菜单链接之间，而在桌面上(当菜单是水平时)位于菜单链接下方(因此子菜单不会破坏 justify-content: space- Between; 的对齐方式。 HTML:

<footer>
  <hr />
  <ul class="menu">
    <li>
      <a class="toggle" href="#submenu">submenu</a>
      <ol id="submenu" class="table-of-contents toggle-content is-mobile">
        <li>
          <a href="#" class="content-entry">sub-menu</a>
        </li>
        ...
      </ol>
    </li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
  </ul>
  <ol id="submenu" class="table-of-contents toggle-content is-desktop">
    <li>
      <a href="#" class="content-entry">lorem the ipsum placeholder text</a>
    </li>
    ...
  </ol>
  <hr />
  <p class="additional">some text</p>
</footer>

到目前为止，子菜单已按上述方式显示，但在使子菜单可点击时出现问题，因为子菜单具有相同的 ID。问题是如何使子菜单在我的场景中在移动设备和桌面设备上都可单击。

请查看 jsfiddle 示例(更改结果窗口的宽度) https://jsfiddle.net/virsis12/c4Lt2krm/31/

Answer 1

无需复制 #submenu 的 html。

您应该将#submenu移动到第一个li元素内，并在桌面屏幕上将其position设置为absolute.使用javascript显示或隐藏子菜单。

const toggle = document.querySelector('.toggle');
const submenu = document.getElementById('submenu');

toggle.addEventListener('click', () => {
  submenu.classList.toggle('showSubMenu');
});

ol, ul {
  list-style-type: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.submenu-container {
  position: relative;
}

.table-of-contents {
  display: none;
  box-sizing: border-box;
  padding: 10px;
  text-align: left;
  overflow: hidden;
}

.table-of-contents li {
  padding: 5px 0;
}

.showSubMenu {
  display: block;
}

@media (min-width: 768px) {
  .table-of-contents {
    background: #fff;
    position: absolute;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    top: 120%;
    left: 0;
    width: 150px;
    text-align: center;
  }
  .menu {
    flex-direction: row;
    justify-content: space-between;
  }
}

<footer class=" footer">
  <hr>
  <ul class="menu">
    <li class="submenu-container">
      <a class="toggle" href="#submenu">submenu</a>
      <ol id="submenu" class="table-of-contents">
        <li><a href="#" class="content-entry">placeholder text</a></li>
        <li><a href="#" class="content-entry">placeholder text</a></li>
        <li><a href="#" class="content-entry">placeholder text</a></li>
        <li><a href="#" class="content-entry">placeholder text</a></li>
        <li><a href="#" class="content-entry">placeholder text</a></li>
        <li><a href="#" class="content-entry">placeholder text</a></li>
      </ol>
    </li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
  </ul>
  <hr>
  <p class="additional">some text</p>
</footer>