Question

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

const fakeCall = () => new Promise(resolve => {
  setTimeout(() => resolve({ response: 'ok' }), 1E3)
})

const fooAction = createAction('FOO', async () => {
  const { response } = await fakeCall()
  return response
})

const foo = () => dispatch =>
  dispatch(fooAction())
    .then(() => dispatch(bar()))

// or

const foo = () => async dispatch => {
  await dispatch(fooAction())
  dispatch(bar())
}

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;
}

Answer 1

检查以下修改。

＆＃13;

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery('#subMenu').slideToggle("slow");
});

＆＃13;

.header-container {
  position: relative;
  margin: 0;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
  vertical-align: text-top;
  max-width: 100px;
}
#subMenu {
  display: none;
  background: blue;
  position: relative;
  top: 50;
  left: 0;
  width: 100%;
  margin: 0px;
}
#subMenu > ul {
  margin: 0;
}
.wrapper {
  background: red;
  min-height: 500px;
}

＆＃13;

<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>
          
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div id="subMenu">
     <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>
</div>
<div class="wrapper">
</div>

＆＃13;

请检查修改后的代码。现在

Answer 2

您可以使用flexbox：

＆＃13;

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

对于此解决方案，您必须不使用position: relative设置其任何父级。这样，:before元素将采用整个宽度。

＆＃13;

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何使子菜单按下内容

3 个答案: