javascript html+css+js下拉菜单点击退出

cyvaqqii  于 2023-01-04  发布在  Java
关注(0)|答案(1)|浏览(170)

我有几个下拉选择,我试图实现一个退出功能,点击任何地方的文件,使下拉列表将关闭。目前,它只关闭,如果你点击自己或另一个选择。

const selection = document.querySelectorAll('.selection-selected');
const optionContainer = document.querySelectorAll('.options-container');

function toggleSelection() {
    const selectionToggle = this.getAttribute("aria-expanded");
    for (i = 0; i < selection.length; i++) {
      selection[i].setAttribute("aria-expanded", "false");
    }
    
    if (selectionToggle == "false") {
        this.setAttribute("aria-expanded", "true");

    } 
}
selection.forEach(serviceItem => serviceItem.addEventListener("click", toggleSelection));

   
//Channel Selection
const channelSelection = document.querySelector('.channel');
const optionList = document.querySelectorAll('.channel-option');

optionList.forEach( o => {
  o.addEventListener("click", () => {
    channelSelection.innerHTML = o.querySelector("label").innerHTML;
    channelSelection.setAttribute("aria-expanded", "false");
    channelSelection.style.color = "#000";
    
  })
})

for (i = 0; i < selection.length; i++) {
  if(selection[i].ariaExpanded == "true") {
    document.addEventListener('click', () => {
      selection[i].setAttribute("aria-expanded", "false");
    })
  }
}

我试过这个,但它不工作,所以我正在寻找人谁可以建议我解决这个问题。谢谢你的帮助提前。

rt4zxlrg

rt4zxlrg1#

您可以使用blurfocusout,因此当您退出或单击文档中的任何位置时,blurfocusout事件将为该元素触发,然后您可以激发该事件并关闭下拉列表。
下面是一些示例。Link

相关问题