關閉下拉菜單<li>點擊香草 javascript</li>

Question

我有一個帶有過渡的下拉菜單，它完全按照我想要的方式工作。 我想保持過渡狀態。 下拉菜單還包含供用戶過濾頁面上顯示的視頻的選項。

我遇到的問題是，一旦用戶單擊任何 <li> 選項，我希望菜單關閉。 目前它只能使用主按鈕再次關閉。

我嘗試了一些不同的選項，但我的 Javascript 還不夠強大，還不知道我哪里出錯了，我真的不想使用 JQuery 或 Bootstrap。

任何幫助將不勝感激！

 // Video Filter var filterItems = document.querySelectorAll('.item') function showAll() { filterItems.forEach(function(element) { element.classList.add('show') }) } function showCategory(category) { filterItems.forEach(function(element){ if (element.classList.contains(category)) { element.classList.add('show') } else { element.classList.remove('show') } }) } showAll() // Dropdown Button var filterBtn = document.getElementsByClassName("dropbtn"); var i; for (i = 0; i < filterBtn.length; i++) { filterBtn[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }) }

 .dropbtn { position: relative; left: 50%; transform: translateX(-50%); text-decoration: none; padding: 20px 20px 18px 20px; color: black; background-color: rgb(245, 235, 244); border-radius: 100px; display: inline-block; cursor: pointer; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; border: none; }.dropdown { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); margin-bottom: 20px; }.dropdown-content { position: relative; background-color: rgba(245, 235, 244); min-width: 160px; z-index: 1; margin: 0; list-style-type: none; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; padding: 0 10px; text-align: center; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }.dropdown-content li { color: black; padding: 12px 16px; text-decoration: none; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }.dropdown-content li:hover {filter: opacity(60%);}.dropbtn:hover {opacity: 60%;}.dropbtn:focus {outline-color: white;}.video-main h2 { font-weight: 600; text-transform: uppercase; font-size: 1.8em; letter-spacing: 1.5px; margin: 30px 0; color: rgb(245, 235, 244); align-self: center; }.video-main { display: flex; flex-direction: column; align-content: center; background-color: black; }.video-boxes { display: flex; width: 100%; justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; text-align: center; }.video-boxes video { width: 100%; max-width: 1280px; max-height: 40vh; }.item { display: none; width: 90%; flex-wrap: wrap; text-align: center; margin-bottom: 20px; }.video-boxes.item h4 { color: rgb(245, 235, 244); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }.show { display: block; }

 <main class="video-main"> <h2>Video</h2> <div class="dropdown"> <button class="dropbtn">Filter Projects</button> <ul class="dropdown-content"> <li class="filter-list-item" id="all" onclick="showAll()">All Items</li> <li class="filter-list-item" onclick="showCategory('category-nike')">Nike</li> <li class="filter-list-item" onclick="showCategory('category-BSpace')">BlankSpace</li> <li class="filter-list-item" onclick="showCategory('category-AfterEff')">After Effects</li> <li class="filter-list-item" onclick="showCategory('category-vegan')">Vegan</li> </ul> </div> <div class="video-boxes"> <div class="item category-nike"> <video src="" controls></video> <h4 class="video-title">Nike</h4> </div> <div class="item category-BSpace"> <video src="" controls></video> <h4 class="video-title">Blankspace</h4> </div> <div class="item category-AfterEff"> <video src="" controls></video> <h4 class="video-title">Logo Animation</h4> </div> <div class="item category-vegan"> <video src="" controls></video> <h4 class="video-title">Vegan</h4> </div> </div> </main>

Answer 1

單擊列表項之一時，您需要將列表項容器的max-height設置為零。 您還需要通過從中移除活動的 class 來重置過濾器按鈕。 首先為您的列表項定義一個變量：

var listItems = document.querySelectorAll('.filter-list-item');

然后為每個列表項添加一個事件偵聽器，這將在單擊時折疊列表項容器：

listItems.forEach(item => {
  item.addEventListener("click", function() {
    filterBtn[0].classList.remove("active");
    var content = filterBtn[0].nextElementSibling;
    content.style.maxHeight = "";
  });
});

完整代碼：

 // Video Filter var filterItems = document.querySelectorAll('.item'); var listItems = document.querySelectorAll('.filter-list-item'); function showAll() { filterItems.forEach(function(element) { element.classList.add('show') }) } function showCategory(category) { filterItems.forEach(function(element) { if (element.classList.contains(category)) { element.classList.add('show') } else { element.classList.remove('show') } }) } showAll() // Dropdown Button var filterBtn = document.getElementsByClassName("dropbtn"); var i; for (i = 0; i < filterBtn.length; i++) { filterBtn[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }) } listItems.forEach(item => { item.addEventListener("click", function() { filterBtn[0].classList.remove("active"); var content = filterBtn[0].nextElementSibling; content.style.maxHeight = ""; }); });

 .dropbtn { position: relative; left: 50%; transform: translateX(-50%); text-decoration: none; padding: 20px 20px 18px 20px; color: black; background-color: rgb(245, 235, 244); border-radius: 100px; display: inline-block; cursor: pointer; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; border: none; }.dropdown { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); margin-bottom: 20px; }.dropdown-content { position: relative; background-color: rgba(245, 235, 244); min-width: 160px; z-index: 1; margin: 0; list-style-type: none; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; padding: 0 10px; text-align: center; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }.dropdown-content li { color: black; padding: 12px 16px; text-decoration: none; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }.dropdown-content li:hover { filter: opacity(60%); }.dropbtn:hover { opacity: 60%; }.dropbtn:focus { outline-color: white; }.video-main h2 { font-weight: 600; text-transform: uppercase; font-size: 1.8em; letter-spacing: 1.5px; margin: 30px 0; color: rgb(245, 235, 244); align-self: center; }.video-main { display: flex; flex-direction: column; align-content: center; background-color: black; }.video-boxes { display: flex; width: 100%; justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; text-align: center; }.video-boxes video { width: 100%; max-width: 1280px; max-height: 40vh; }.item { display: none; width: 90%; flex-wrap: wrap; text-align: center; margin-bottom: 20px; }.video-boxes.item h4 { color: rgb(245, 235, 244); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }.show { display: block; }

 <main class="video-main"> <h2>Video</h2> <div class="dropdown"> <button class="dropbtn">Filter Projects</button> <ul class="dropdown-content"> <li class="filter-list-item" id="all" onclick="showAll()">All Items</li> <li class="filter-list-item" onclick="showCategory('category-nike')">Nike</li> <li class="filter-list-item" onclick="showCategory('category-BSpace')">BlankSpace</li> <li class="filter-list-item" onclick="showCategory('category-AfterEff')">After Effects</li> <li class="filter-list-item" onclick="showCategory('category-vegan')">Vegan</li> </ul> </div> <div class="video-boxes"> <div class="item category-nike"> <video src="" controls></video> <h4 class="video-title">Nike</h4> </div> <div class="item category-BSpace"> <video src="" controls></video> <h4 class="video-title">Blankspace</h4> </div> <div class="item category-AfterEff"> <video src="" controls></video> <h4 class="video-title">Logo Animation</h4> </div> <div class="item category-vegan"> <video src="" controls></video> <h4 class="video-title">Vegan</h4> </div> </div> </main>

Answer 2

只需使用 class filter-list-item將事件偵聽器附加到每個元素。

document.querySelectorAll('.filter-list-item').forEach(li => li.addEventListener('click', function(e){
      var content = this.parentNode;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
}));

 // Video Filter var filterItems = document.querySelectorAll('.item') function showAll() { filterItems.forEach(function(element) { element.classList.add('show') }) } function showCategory(category) { filterItems.forEach(function(element){ if (element.classList.contains(category)) { element.classList.add('show') } else { element.classList.remove('show') } }) } showAll() // Dropdown Button var filterBtn = document.getElementsByClassName("dropbtn"); var i; for (i = 0; i < filterBtn.length; i++) { filterBtn[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }) } document.querySelectorAll('.filter-list-item').forEach(li => li.addEventListener('click', function(e){ var content = this.parentNode; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }));

 .dropbtn { position: relative; left: 50%; transform: translateX(-50%); text-decoration: none; padding: 20px 20px 18px 20px; color: black; background-color: rgb(245, 235, 244); border-radius: 100px; display: inline-block; cursor: pointer; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; border: none; }.dropdown { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); margin-bottom: 20px; }.dropdown-content { position: relative; background-color: rgba(245, 235, 244); min-width: 160px; z-index: 1; margin: 0; list-style-type: none; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; padding: 0 10px; text-align: center; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }.dropdown-content li { color: black; padding: 12px 16px; text-decoration: none; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }.dropdown-content li:hover {filter: opacity(60%);}.dropbtn:hover {opacity: 60%;}.dropbtn:focus {outline-color: white;}.video-main h2 { font-weight: 600; text-transform: uppercase; font-size: 1.8em; letter-spacing: 1.5px; margin: 30px 0; color: rgb(245, 235, 244); align-self: center; }.video-main { display: flex; flex-direction: column; align-content: center; background-color: black; }.video-boxes { display: flex; width: 100%; justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; text-align: center; }.video-boxes video { width: 100%; max-width: 1280px; max-height: 40vh; }.item { display: none; width: 90%; flex-wrap: wrap; text-align: center; margin-bottom: 20px; }.video-boxes.item h4 { color: rgb(245, 235, 244); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }.show { display: block; }

 <main class="video-main"> <h2>Video</h2> <div class="dropdown"> <button class="dropbtn">Filter Projects</button> <ul class="dropdown-content"> <li class="filter-list-item" id="all" onclick="showAll()">All Items</li> <li class="filter-list-item" onclick="showCategory('category-nike')">Nike</li> <li class="filter-list-item" onclick="showCategory('category-BSpace')">BlankSpace</li> <li class="filter-list-item" onclick="showCategory('category-AfterEff')">After Effects</li> <li class="filter-list-item" onclick="showCategory('category-vegan')">Vegan</li> </ul> </div> <div class="video-boxes"> <div class="item category-nike"> <video src="" controls></video> <h4 class="video-title">Nike</h4> </div> <div class="item category-BSpace"> <video src="" controls></video> <h4 class="video-title">Blankspace</h4> </div> <div class="item category-AfterEff"> <video src="" controls></video> <h4 class="video-title">Logo Animation</h4> </div> <div class="item category-vegan"> <video src="" controls></video> <h4 class="video-title">Vegan</h4> </div> </div> </main>