JavaScript如何在另一個點擊打開時關閉一個下拉菜單。沒有Jquery

Question

我有很多<ul><li> s和每個<ul>都有它自己的下拉菜單。我想一次只打開一個下拉菜單。如果我點擊打開一個，那麼已經打開的那個需要關閉。

function toggleClass(element, className) { 
 
    if (!element || !className) { 
 
    return; 
 
    } 
 

 
    var classString = element.className, 
 
    nameIndex = classString.indexOf(className); 
 
    if (nameIndex == -1) { 
 
    classString += ' ' + className; 
 
    } else { 
 
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length); 
 
    } 
 
    element.className = classString; 
 
} 
 

 
function dropDown(el) { 
 
    toggleClass(el.nextElementSibling, 'overlayOpen'); 
 

 
}

ul { 
 
    width: 200px; 
 
} 
 
li { 
 
    margin: 0; 
 
    font-size: 20px; 
 
    line-height: 50px; 
 
    width: 100%; 
 
    cursor: pointer; 
 
    background-color: red; 
 
    overflow: hidden; 
 
} 
 
.overlayOpen { 
 
    opacity: 1 !important; 
 
    height: 50px !important; 
 
    width: 100% !important; 
 
} 
 
.overlay { 
 
    width: 100%; 
 
    z-index: 1000; 
 
    background-color: green; 
 
    overflow: hidden; 
 
    max-width: 800px; 
 
    opacity: 0; 
 
    height: 0; 
 
    width: 0; 
 
    -webkit-transition: width 0.2s, height 0.2s, opacity 0.2s ease; 
 
    -moz-transition: width 0.2s, height 0.2s, opacity 0.2s ease; 
 
    -o-transition: width 0.2s, height 0.2s, opacity 0.2s ease; 
 
    -ms-transition: width 0.2s, height 0.2s, opacity 0.2s ease; 
 
    transition: width 0.2s, height 0.2s, opacity 0.2s ease; 
 
}

<ul> 
 
    <li id="1" onclick='dropDown(this)'>example</li> 
 
    <li id="overlay_1" class='overlay'>Hidden stuff</li> 
 
</ul> 
 

 
<ul> 
 
    <li id="2" onclick='dropDown(this)'>example</li> 
 
    <li id="overlay_2" class='overlay'>Hidden stuff</li> 
 
</ul>

Answer 1

你可以只刪除所有元素的overlayOpen類打開點擊的元素之前：爲你解答

function dropDown(el) { 
    Array.from(document.querySelectorAll('.overlayOpen')) 
     .filter(elem => elem !== el.nextElementSibling) 
     .forEach(element => element.classList.remove('overlayOpen')); 
    toggleClass(el.nextElementSibling, 'overlayOpen'); 
}