當點擊鏈接內的下拉菜單時關閉

我正在點擊觸發的下拉菜單上。我遇到的問題是，當我點擊已打開的下拉菜單中的鏈接時，它會自動關閉下拉菜單。我試圖用setTimeout和clearTimeOut對狀態進行排隊：當在dropdownBox中點擊鏈接時，dropdownBox上的setTimeOut應該被函數clickitem清除，因此下拉不應該關閉。但在這裏我失敗了。有人可以建議我怎麼做這項工作？順便說一句，我不能使用jQuery，只有Javascript。當點擊鏈接內的下拉菜單時關閉

const trigger = document.querySelector('.ul-catalogue > li > a'); 
const dropdownBox = document.querySelector('.nav > .ul-catalogue > li > .dropdown'); 
const link = document.querySelector(".dropdown > ul > li"); 

function handleClick() { 
    dropdownBox.classList.add('trigger-click'); 
    setTimeout(() => dropdownBox.classList.add('trigger-click-active'), 150); 
    dropdownBox.focus(); 
} 

var timeOut; 
function handleClickOut() { 
    timeOut = setTimeout(() => dropdownBox.classList.remove('trigger-click', 'trigger-click-active'), 0); 
} 

function clickitem() { 
clearTimeout(timeOut); 
} 

trigger.addEventListener('click', handleClick);//This we do not touch 
dropdownBox.addEventListener('blur', handleClickOut, true); 
link.addEventListener('click', clickitem);

https://jsfiddle.net/zw9w8eg0/3/

來源

2017-09-07 Martynas March

爲什麼使用函數handleClickOut（）？ –

如果用戶單擊外部下拉區域，則需要handleClickOut（）來關閉下拉框。 –

這是因爲你的link有href="#"，所以當你點擊它，你被重定向到同一個頁面，但所有的更新都將被重置到原來的狀態。

來源

2017-09-07 08:25:02

這就是我解決它的方法：我需要監聽對話框是否處於focusin狀態（當用戶在fx上點擊鏈接時，它需要監聽）。所以我加了dropdownBox.addEventListener('focusin', clickitem, true);完整代碼：

const trigger = document.querySelector('.ul-catalogue > li > a'); 
const dropdownBox = document.querySelector('.nav > .ul-catalogue > li > .dropdown'); 

function handleClick() { 
    dropdownBox.classList.add('trigger-click'); 
    setTimeout(
     () => dropdownBox.classList.add('trigger-click-active'), 0); 
    dropdownBox.focus(); 
} 

var timeOut; 

function handleClickOut() { 
    timeOut = setTimeout(() => this.classList.remove('trigger-click', 'trigger-click-active'), 0); 
} 

    function clickitem() { 
     clearTimeout(timeOut); 
} 


trigger.addEventListener('click', handleClick); 
dropdownBox.addEventListener('focusout', handleClickOut, true); 
dropdownBox.addEventListener('focusin', clickitem, true);

來源

2017-09-07 20:00:25

當點擊鏈接內的下拉菜單時關閉

回答

相關問題