在下拉元素vanilla-js中添加一个关闭按钮

Question

我有触发下拉菜单的代码。当我按下我的下拉触发器时，代码就会工作，我的下拉列表就会出现。当我在下拉列表之外单击时，它也会起作用。我唯一的问题是，当我点击关闭按钮时，我无法使我的下拉列表消失。我根本不知道如何使它发挥作用。有什么建议吗？

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);
}

Answer 1

您可以添加这样的新事件侦听器：

//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';
})

测试用例：https://jsfiddle.net/7xy0uwnt/8/

Answer 2

您可以模糊下拉列表。

dropdown.blur();