如何解决按钮打开另一个按钮的列表
我想制作一个按钮,当点击它时会打开它下面的另一个子按钮。就像显示的一个主按钮一样,单击它会打开子按钮,再次单击它会关闭子按钮。 here is image explain
解决方法
希望这有帮助:)
const container = document.querySelector('.container')
const mainBtn = document.querySelector('#main')
mainBtn.addEventListener('click',() => {
container.classList.toggle('active')
})
.container{
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.container button{
position: absolute;
left: 0;
width: 150px;
z-index: 1;
}
#main{
z-index: 100;
cursor: pointer;
}
.container.active button{
position: relative;
}
<div class="container">
<button id="main">Click me</button>
<button class="inner">btn 1</button>
<button class="inner">btn 2</button>
<button class="inner">btn 3</button>
<button class="inner">btn 4</button>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。