Question

我有一个带有子ul的ul作为我的下拉导航菜单。单击下拉按钮时会显示子数据。

由于某些原因我无法弄清楚，sub ul的最后一个li不服从为所有子ul设置的样式。在这种情况下，这是最大高度和动画。

编辑：溢出：隐藏在.dropdown＆gt; .topnav-item修复它 - 感谢lipp

HTML

<nav id="topnav">
<ul class="topnav-box">
  <li class="topnav-item"><a class="link" href="">Home</a></li>
  <li class="topnav-item"><button class="button">Dropdown 1</button>
    <ul class="dropdown">
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Not animating, Y?</a></li>
    </ul>
  </li>
  <li class="topnav-item"><button class="button">DD 2</button>
    <ul class="dropdown">
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Not animating, Y?</a></li>
    </ul>
  </li>
  <li class="topnav-item"><button class="button">Big Dropdown</button>
    <ul class="dropdown">
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Test</a></li>
      <li class="topnav-item"><a class="link" href="">Not animating, Y?</a></li>
    </ul>
  </li>
  <li class="topnav-item"><a class="link" href="">About</a></li>
</ul>
</nav>

SASS

.topnav-box
  display: flex
  align-items: center

.topnav-item
  position: relative

  > .link
    white-space: nowrap
    display: block
    text-decoration: none
    padding: 6px 10px 6px 10px
    color: white
    background-color: orange
    font-size: 22px
    line-height: 100%
    &:hover
      background-color: white
      color: orange

  > .button
    border: none
    cursor: pointer
    margin: 0
    padding: 6px 10px 6px 10px
    color: white
    background-color: orange
    font-size: 22px
    line-height: 100%
    &:hover
      color: orange
      background-color: white

  //Show dropdown items when button has -js-active class
  > .button.-js-active
    + .dropdown
      > .topnav-item
          display: block

  > .dropdown
    position: absolute
    top: 100%
    min-width: 100%

    //Apparently this does not affect the last-child of .dropdown ul
    > .topnav-item
      display: none
      max-height: 0px
      @for $i from 1 through 12
        &:nth-of-type(#{$i})
          animation:
            name: subnav
            duration: 3000ms
            delay: (200ms * $i) - 200ms
            fill-mode: forwards

@keyframes subnav
  0%
    max-height: 0px
  100%
    max-height: 35px

jquery的

function tglNavDropDown (e) {
  e.stopPropagation();
  $('.topnav-item > button').not(this).removeClass('-js-active');
  $(this).toggleClass('-js-active');
}
$('.topnav-item > .button').click(tglNavDropDown);

Answer 1

样式正确应用于最后一项。问题是另一个问题。即使您设置max-height=0px，也不会阻止溢出的内容可见。最后一项只是最后一个渲染元素，因此可见。

要解决此问题，您可以将overflow: hidden应用于.topnav-item（demo）或.dropdown（demo）

Answer 2

您必须在max-height上设置ul.dropdown，而不是<li>。

您还需要将overflow: hidden添加到ul.dropdown

pen =＆gt; https://codepen.io/tonysamperi/pen/qKZPxx

<ul>的最后一个孩子不服从其他孩子的风格

HTML

SASS

jquery的

2 个答案: