我想在用户单击按钮时创建一个可滚动的下拉列表div

Question

我想创建一个下拉列表，但下拉列表应该是一个div，里面有多个页面。单击右侧，左侧图标，将出现新页面。请参阅随附的屏幕截图。

Answer 1

检查这个Jsfiddle： https://jsfiddle.net/aaodtoh6/4/

HTML：

<div id="cel-screen">
  <a href="javascript:void(0)" onclick="toggleColorlib()" id="colorbt">Color Buttons</a>
  <div id="color-lib">
    <ul>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
      <li>Color</li>
    </ul>
  </div>
</div>

CSS：

#cel-screen {width:400px; height:650px; border:1px solid gold; position:relative}
#colorbt {position:absolute; bottom:0; right:0;}
#color-lib {background:#25d396;width:50%; height:250px; overflow-x:hidden; overflow-y:auto; position:absolute; bottom:15px; right:0; display:none;}

JS：

function toggleColorlib() {
     var element = document.getElementById('color-lib'),
    style = window.getComputedStyle(element),
    display = style.getPropertyValue('display');
    if(display == "none"){
            document.getElementById('color-lib').style.display = "block";
    } else {
        document.getElementById('color-lib').style.display = "none";
    }
}

使用javascript实现它，看看它是否适合你。