我用物化库做了一个下拉列表。它包含元素列表。现在我想在所有元素的底部查看更多链接。该链接已成功添加,但问题是当我单击该链接下拉/选择时会关闭。
const select = document.querySelector("select");
const fillSelect = (newOptions) => {
const options = select.querySelectorAll("option");
options.forEach((x) => x.remove());
newOptions.forEach((opt) => {
const optionElement = document.createElement("option");
optionElement.innerHTML = opt;
select.appendChild(optionElement);
});
updateSelect();
};
const addViewMoreLink = () => {
const link = document.createElement('div');
link.innerHTML = 'View more';
link.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
return false;
})
const dropdownContent = select.parentNode.querySelector(".dropdown-content");
dropdownContent.appendChild(link);
}
const updateSelect = () => {
window.M.FormSelect.init(select, {});
}
window.onload = function(){
fillSelect(["Option 1", "Option 2", "Option 3"]);
addViewMoreLink()
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<select id="organization-input">
</select>
我希望当我单击更多 View 时,它应该关闭选择/下拉内容并显示新选项。添加新选项不是问题。目前的问题是,即使我使用了 stop
e.stopPropagation();
,它也会关闭。
最佳答案
<style type="text/css">
.classic-dropdown .dropdown-content.select-dropdown {
pointer-events: none;
}
.classic-dropdown .dropdown-content.select-dropdown li {
pointer-events: all;
}
</style>
<div class="classic-dropdown">
<select id="organization-input">
</select>
</div>
<script type="text/javascript">
const select = document.querySelector("select");
const fillSelect = (newOptions) => {
const options = select.querySelectorAll("option");
options.forEach((x) => x.remove());
newOptions.forEach((opt) => {
const optionElement = document.createElement("option");
optionElement.innerHTML = opt;
select.appendChild(optionElement);
});
updateSelect();
};
const addViewMoreLink = (e) => {
const link = document.createElement('div');
link.innerHTML = 'View more';
link.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
return false;
})
const dropdownContent = select.parentNode.querySelector(".dropdown-content");
dropdownContent.appendChild(link);
}
const updateSelect = () => {
window.M.FormSelect.init(select, {});
}
window.onload = function() {
fillSelect(["Option 1", "Option 2", "Option 3"]);
addViewMoreLink()
}
document.getElementsByClassName('dropdown-content')[0]
</script>
关于javascript - 如何在具体情况下停止隐藏下拉内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68634599/