我有一个 Canvas ,其中有两个右对齐的图标。 我希望当单击其中一个图标时,应打开一个包含一些选项的下拉菜单。
但是我不知道如何在单击图标时创建下拉列表。所以需要这方面的帮助。
最佳答案
因为你不能将 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>
关于html - 单击时如何使图标成为下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26729141/