在下拉列表中显示列表的隐藏元素

Question

我想在下拉列表中显示列表中所有隐藏的元素。 这应该是动态的，取决于窗口中可以容纳多少选项。

怎么可以这样做， 或者有人知道这个插件吗？

＆＃13;

＆＃13;

.navigation--list{
  width: 500px;
  height: 50px;
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}

.navigation--list li{
  display: inline-block;
  margin-right: 25px;
}

#more{
  display: none;
}

＆＃13;

<ul class="navigation--list">
  <li>option 1</li>
  <li>option 2</li>
  <li>option 3</li>
  <li>option 4</li>
  <li>option 5</li>
  <li>option 6</li>
  <li>option 7</li>
  <li>option 8</li>
  <li>option 9</li>
  <li id="more">show more</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

查看另一个问题：

adding more button for list in responsive navigation

您需要使用一些Javascript。你还需要将它与show hide配对。

以下是一个例子：

＆＃13;

＆＃13;

var elemWidth, fitCount, fixedWidth = 120,
  $menu = $("ul#menu"),
  $collectedSet;

collect();
$(window).resize(collect);


function collect() {
  elemWidth = $menu.width();
  fitCount = Math.floor(elemWidth / fixedWidth) - 1;
  $collectedSet = $menu.children(":gt(" + fitCount + ")");
  $("#submenu").empty().append($collectedSet.clone());
}

$(document).ready(function() {
  $("#submenu").hide();
  $(".show").click(function() {
    $("#submenu").slideToggle();
  });
});

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  position: relative;
  background-color: #ccc;
  height: 32px;
  overflow: visible;
}

ul#menu,
ol {
  height: 32px;
  max-width: 80%;
  overflow: hidden;
}

ul#menu > li,
ol > li {
  display: block;
  float: left;
  height: 32px;
  width: 120px;
  padding: 4px 8px;
}

ol {
  position: absolute;
  right: 0;
  top: 0;
  overflow: visible;
}

ol > li {
  min-width: 120px;
}

ol ul {
  position: absolute;
  top: 120%;
  right: 10%;
}

ol li ul > li {
  list-style: none;
  background-color: #eee;
  border: 1px solid gray;
  padding: 4px 8px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="menu">
    <li>Option One</li>
    <li>Option Two</li>
    <li>Option Three</li>
    <li>Option Four</li>
    <li>Option Five</li>
    <li>Option Six</li>
  </ul>
  <ol>
    <li class="show">
      Show more
      <ul id="submenu"></ul>
    </li>
  </ol>
</div>

＆＃13;

＆＃13;

＆＃13;