javascript - 如何让子菜单下推内容

Question

我正在尝试弄清楚如何切换子菜单的显示，单击顶部菜单项打开子菜单，并使其相对定位，以便在动画打开时将内容向下推，并且还可以达到整个浏览器宽度。这也必须以保持顶级菜单完好无损的方式发生，这是我发现很难实现的。这是我的尝试:

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>

Answer 1

好吧，这有点棘手，但您可以使用 :before 伪元素和 position: absolute 来覆盖屏幕宽度。

要使此解决方案有效，您必须不将其任何父级设置为position: relative。这样，:before 元素将占据整个宽度。

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
  vertical-align: top;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}

.main-nav #nav > li ul:before {
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  background: blue;
  height: 100%;
  z-index: -1;
}

.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>