He hecho un menú desplegable con la biblioteca materialise. Contiene lista de elementos. Ahora quiero ver más enlaces en la parte inferior de todos los artículos. El enlace se agregó con éxito, pero el problema es que cuando hago clic en ese enlace desplegable/seleccionar se cierra.
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> Quiero que cuando haga clic en ver más, cierre el contenido de selección/desplegable y muestre nuevas opciones. Agregar nuevas opciones no es un problema. El problema actualmente es que se cierra a pesar de que he usado 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>Como mencionó, desea cerrar el menú desplegable cuando hace clic en ver más y mostrar nuevas opciones. Así que es bueno que se cierre al hacer clic en él. Ahora todo lo que necesita hacer es agregar nuevas opciones y luego activar un evento de clic en dropdown-trigger para que se abra nuevamente y muestre nuevas opciones. La razón por la que el menú desplegable no se cerró cuando hizo clic fuera de él es que la altura del cuerpo es igual a la altura del contenido (contenedor desplegable), por lo que en realidad no está haciendo clic en el cuerpo. Es por eso que he establecido min-height en el cuerpo dentro de css.
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 => { fillSelect(["Option 4", "Option 5", "Option 6"]); document.getElementsByClassName('dropdown-trigger')[0].click(); }); const dropdownContent = select.parentNode.querySelector(".dropdown-content"); dropdownContent.appendChild(link); } const updateSelect = () => { const instances = window.M.FormSelect.init(select, {}); } document.addEventListener('DOMContentLoaded', function() { fillSelect(["Option 1", "Option 2", "Option 3"]); addViewMoreLink(); }); body { min-height: 100vh; } <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>