html - 单击时如何使图标成为下拉列表？

Question

我有一个 Canvas ，其中有两个右对齐的图标。我希望当单击其中一个图标时，应打开一个包含一些选项的下拉菜单。

但是我不知道如何在单击图标时创建下拉列表。所以需要这方面的帮助。

Answer 1

因为你不能将 html 元素放在 <canvas> 中，您只需定位您的 html 元素，使它们看起来位于 Canvas 内。主要技巧是包装 <canvas>包装内的元素 <div>像这样

编辑 我刚刚添加了一个图像下拉列表，深受启发的形式 Bootstrap drop-downs .尽管它非常基础，但它应该可以工作。如果您想要功能齐全的东西，请查看上面的链接(整个 bootstrap fromework 非常好)。

$(".dropdown>[data-toggle='dropdown']").on('click', function(){
  $(this).parent(".dropdown").toggleClass("open");
});

#ex-canvas-wrapper{
    postion: relative;
}
#ex-canvas {
    border: 2px solid #16a085;
    background-color: #ecf0f01;
}
#canvas-select {
    position:absolute;
    left: 138px;
    top: 12px;
}
#canvas-dropdown{
  position: absolute;
  left: 145px;
  top: 35px;
}
.dropdown>.dropdown-menu{
  display: none;
  position: absolute;
  border: 1px solid #bdc3c7;
  min-width: 60px;
  margin: 0;
}
.dropdown.open>.dropdown-menu{
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ex-canvas-wrapper">
    <canvas id="ex-canvas" width="200" height="100"></canvas>
    <select id="canvas-select">
        <option value="value1">Value 1</option>
        <option value="value2" selected>Value 2</option>
        <option value="value3">Value 3</option>
    </select>
    <div class="dropdown" id="canvas-dropdown">
      <img data-toggle="dropdown" src="http://i59.tinypic.com/2cgdh87.png">
      <ul class="dropdown-menu">
        <li>Value 1</li>
        <li>Value 2</li>
        <li>Value 3</li>
      </ul>
     </div>
</div>