[英]Add a closing button to a dropdown element vanilla js
我有触发我的下拉菜单的代码。 当我按下我的下拉触发器时,代码有效并且我的下拉菜单出现。 当我在下拉列表之外单击时,它也可以工作。 我唯一的问题是,当我单击关闭按钮时,我无法让下拉菜单消失。 我根本不知道如何使它工作。 有什么建议么?
function dropFunction(containerID) {
var container = document.getElementById(containerID),
selected = container.querySelector('.selected'),
currentInList = container.querySelector('.dropdown-active'),
dropdown = container.querySelector('.dropdown');
var ignoredClicked = [selected, dropdown];
selected.addEventListener('click', function () {
if (dropdown.className.indexOf('open') > -1) {
dropdown.className = 'dropdown'
}
else {
dropdown.className = 'dropdown open';
setTimeout(function () {
dropdown.className = 'dropdown open visible'
}, 5)
}
});
document.body.addEventListener('click', function () {
dropdown.className = 'dropdown';
});
for (var i = 0; i < ignoredClicked.length; i++) {
ignoredClicked[i].addEventListener('click', function (e) {
e.stopPropagation();
})
}
}
document.addEventListener('DOMContentLoaded', dropFunction('sortBox1'));
这是我的 html:
<div id="sortBox1" class="sort">
<p class="selected">
<span class="icon-speak"></span> <?= get_option('advertiser_disclosure_caption'); ?>
</p>
<div class="dropdown">
<p><?= get_option('advertiser_disclosure_text'); ?> </p>
<span class="icon-close"></span>
</div>
</div>
这是我的 css:
.dropdown {
padding: 20px;
position: absolute;
background-color: white;
left: 0;
top: 100%;
color: #111;
border-radius: 3px;
display: none;
opacity: 0;
transition: all 1s;
line-height: 30px;
width: 100%;
}
p.selected {
background: transparent;
padding: 0;
margin: 0;
color: #1e6ac6;
font-weight: 400;
cursor: pointer;
}
.dropdown.open {
display: block;
}
.dropdown.visible {
opacity: 1;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}
您可以模糊下拉菜单。
dropdown.blur();
您可以像这样添加新的事件侦听器:
//Relative define to respect your function definiton
var container = document.getElementById('sortBox1'),
dropdown = container.querySelector('.dropdown'),
close = dropdown.querySelector('.icon-close')
close.addEventListener('click', function () {
dropdown.className = 'dropdown';
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.