Minha Solução

criei um botao para "fechar" a lista

<button class="fechar">Fechar</button>

depois criei um display:none para o botao e para a lista no css:

 .fechar {
  display: none;
  }

  .lista {
    display: none;
    padding: 20px;
    list-style-type: none;
    border: 4mm ridge rgba(234, 122, 11, 0.992);
  }

e ai usei somente as funçoes acopladas ao evento "click":

const botaoAbrir = document.querySelector("[onclick]");
const botaoFechar = document.querySelector(".fechar");
const lista = document.querySelector(".lista");

botaoAbrir.addEventListener("click", ()=> {
    lista.style.display="block";
    botaoFechar.style.display="block";
    botaoFechar.addEventListener("click", ()=> {
        lista.style.display="none";
        botaoFechar.style="block";
    })
})