选择溢出元素

Question

使用jQuery选择溢出元素

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

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

我试图想象我的想法：

Link to visualization

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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