要将contextMenu放在按钮下,可以使用以下步骤:
示例代码:
HTML:
<button id="btn">按钮</button>
<ul id="contextMenu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
CSS:
#contextMenu {
display: none;
width: 150px;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 5px;
}
.show {
display: block;
}
JavaScript:
var btn = document.getElementById("btn");
var contextMenu = document.getElementById("contextMenu");
btn.addEventListener("click", function() {
contextMenu.classList.toggle("show");
});
document.addEventListener("click", function(event) {
if (!btn.contains(event.target)) {
contextMenu.classList.remove("show");
}
});
通过以上步骤,当按钮被点击时,contextMenu会显示在按钮下方;当失去焦点或点击其他区域时,contextMenu会隐藏起来。您可以根据实际需求进一步修改和优化代码。
请注意,由于要求不提及特定品牌商,因此无法提供与腾讯云相关的产品和链接。但您可以根据需求,在腾讯云的文档中查找与前端开发、后端开发、云计算等相关的产品和服务信息。
领取专属 10元无门槛券
手把手带您无忧上云