在对话框外扩展的对话框中的 CSS 下拉菜单

【问题标题】：css dropdown in a dialog extended outside the dialog在对话框外扩展的对话框中的 CSS 下拉菜单
【发布时间】：2014-07-06 17:38:40
【问题描述】：

我在对话框中有一个下拉菜单，我想让它溢出对话框并在对话框内滚动。

没有 JavaScript 就完美了。

这里是一个例子：http://jsbin.com/teguzoxi/1/edit

【问题讨论】：

为什么有人要求结束这个问题？
How to ask

标签： css drop-down-menu dialog

【解决方案1】：

您将需要 javaScript 来切换可见性。

内容的滚动和最大尺寸可以用css来完成。

http://jsbin.com/teguzoxi/3/edit?html,css,js,output

  <style>
  ul {
    display: none;
    height: 50px;
    width: 100px;
    overflow-y: scroll;
  }
  </style>

  <button>Toggle Options</button>
  <ul>
     <li>red</li>
    <li>blue</li>
    <li>green</li>
    <li>yellow</li>
    <li>pink</li>
    <li>purple</li>
    <li>orange</li>
  </ul> 

  <script>
  $('button').on('click', function() {
    $('ul').toggle();
  });
  </script>

【讨论】：

我需要在下拉列表中放置一些 html 元素，因此我不会搜索 <select> 作为下拉列表。