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

【问题标题】：Show hidden elements of a list in a dropdown在下拉列表中显示列表的隐藏元素
【发布时间】：2016-07-23 03:17:16
【问题描述】：

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

这是怎么做到的，或者有人知道这个插件吗？

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

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

【问题讨论】：

您的意思是您希望根据窗口中可以容纳多少选项来动态发生这种情况？或者你会静态定义哪些选项应该隐藏并存在于下拉菜单中？
它应该是动态的，取决于窗口中可以容纳多少选项。
adding more button for list in responsive navigation的可能重复
谢谢@showdev。我不知道该怎么办。
@JamesManges 很棒的发现。它不处理下拉功能，所以我不确定它是否足以作为副本——但对于响应式水平菜单来说，这似乎是一个好的开始。

标签： jquery html css

【解决方案1】：

查看另一个问题：

adding more button for list in responsive navigation

您需要为此使用一些 Javascript。您还需要将此与显示隐藏配对。

这是一个例子：

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();
  });
});

* {
  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;
}

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

【讨论】：