时间戳

首页 > 解决方案 > 的最后一个孩子

jquery - 的最后一个孩子
    不服从其他孩子的作风

问题描述

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

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

演示：https ://codepen.io/anon/pen/aKNwNj

编辑：溢出：隐藏在 .dropdown > .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>

粗鲁的

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

标签： jqueryhtmlcsssass

解决方案

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

要解决此问题，您可以申请( demo )overflow: hidden或( demo ).topnav-item.dropdown

推荐阅读