javascript - 选择溢出元素

Question

使用 jQuery 选择溢出元素

我目前正在实习期间做一个元素，我偶然发现了一个我自己无法解决的问题。我有一个水平导航栏，它应该支持无限的导航项。我想要的是所有溢出的导航项都应该隐藏在查看更多按钮中。

如何定位所有溢出的导航项？

我试着将我的想法形象化:

Link to visualization

.sidebar {
  position: fixed;
  z-index: 50;
  width: 25%;
  height: 100%;
  padding: 150px 0 50px;
  background: $secondary;
  overflow-y: scroll;
  @include break(1000px) {
    top: 100px;
    width: 100%;
    height: 50px;
    padding: 0;
    overflow: hidden;
  }
  nav {
    width: 100%;
    height: auto;
  }
  li {
    @include break(1000px) {
      display: inline-block;
    }
  }
  a {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    padding: 17px 40px;
    background: none;
    -webkit-transition: background 0.4s;
    transition: background 0.4s;
    font-family: $font;
    font-size: 16px;
    text-decoration: none;
    line-height: 1;
    color: #fff;
    &: hover {
      background: lighten($secondary, 5%);
    }
  }
  .active {
    color: $primary;
    background: lighten($secondary, 5%);
    span {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 5px;
      height: 50px;
      background: $primary;
      @include break(1000px) {
        top: -webkit-calc(100% - 5px);
        top: calc(100% - 5px);
        width: 100%;
        height: 5px;
      }
    }
  }
}

<div class="sidebar">
  <nav>
    <ul>
      <li><a href="#"><span></span>Item 1</a>
      </li>
      <li><a href="#"><span></span>Item 2</a>
      </li>
      <li><a href="#"><span></span>Item 3</a>
      </li>
      <li><a href="#"><span></span>Item 4</a>
      </li>
      <li><a href="#"><span></span>Item 5</a>
      </li>
      <li><a href="#"><span></span>Item 6</a>
      </li>
      <li><a href="#"><span></span>Item 7</a>
      </li>
      <li><a href="#"><span></span>Item 8</a>
      </li>
      <li><a href="#"><span></span>Item 9</a>
      </li>
      <li><a href="#"><span></span>Item 10</a>
      </li>
      <li><a href="#"><span></span>Item 11</a>
      </li>
      <li><a href="#"><span></span>Item 12</a>
      </li>
    </ul>
  </nav>
</div>
<!-- .siderbar end -->

Answer 1

或者您可以在“查看更多...”上滚动容器的内容。虽然没有代码很难回答。