如何在切換下拉選單上添加互斥性-有解無憂

我有一個帶有下拉子選單的選單。我試圖在單擊另一個專案時關閉一個專案，這樣我就不會同時打開多個專案。在上一個問題：如何將 .nextElementSibling 應用到下拉選單的下一項中，用戶建議我看一下名為互斥性的函式。如何將其添加到我的選單中？

var dropdownBtn = document.querySelectorAll('.menu-btn');

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  menuContent.classList.toggle("show");
  
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}


.drop_container {
   display: none;
   background-color: #017575;
   transition: 0.3s;
   opacity: 0;
}

.drop_container.show {
  display: contents;
  visibility: visible;
  opacity: 1;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

<div class="menu-btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="menu-btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

</div>

uj5u.com熱心網友回復：

將先前單擊的選單存盤在變數中，如果單擊另一個選單，則清除它的類

var dropdownBtn = document.querySelectorAll('.menu-btn'),
    lastOpened = null;

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
    var menuContent = this.nextElementSibling;
    menuContent.classList.toggle("show");

    if (lastOpened && lastOpened !== menuContent)
      lastOpened.classList.remove("show");

    lastOpened = menuContent;
  
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}


.drop_container {
   display: none;
   background-color: #017575;
   transition: 0.3s;
   opacity: 0;
}

.drop_container.show {
  display: contents;
  visibility: visible;
  opacity: 1;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

<div class="menu-btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="menu-btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

</div>

uj5u.com熱心網友回復：

您可以添加一個關閉所有選單的功能，除了您傳遞給它的選單：

var dropdownBtn = document.querySelectorAll('.menu-btn');

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var menuContent = this.nextElementSibling;
  closeMenusExcept(menuContent);
  menuContent.classList.toggle("show");
}));

function closeMenusExcept(menuContent) {
  dropdownBtn.forEach((element) => {
    if (menuContent !== element.nextElementSibling) {
      element.nextElementSibling.classList.remove("show");
    }
  })
}

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  display: none;
  background-color: #017575;
  transition: 0.3s;
  opacity: 0;
}

.drop_container.show {
  display: contents;
  visibility: visible;
  opacity: 1;
}

.drop_container>.item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

  <div class="menu-btn">One</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="menu-btn">Two</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>

uj5u.com熱心網友回復：

請注意 ，我更改了類名，以便它們更易于鍵入和閱讀。

我們將使用編程范式呼叫事件委托。將事件系結到祖先標簽（包含您要控制的所有標簽的標簽）

圖一

const menu = document.querySelector(".dropdown"); 
menu.addEventListener('click', //...

接下來，設計一個事件處理程式，僅在單擊正確的標簽時做出反應

圖二

//...
  function(event) {
   // This is the tag the user clicked 
   const clicked = event.target;
   // Find .show 
   const current = document.querySelector('.show');
   // See if the clicked tag has .show class
   let state = clicked.matches('.show');
   // Only react if the clicked tag has .btn class
   if (clicked.matches('.btn')) {//...

注意：該類.show現在分配給.btn. 見圖四

圖三

//...
      // if there already is a .show    
      if (current) {
        // remove .show
        current.classList.remove('show');
      }
      // if the clicked tag did not have .show previously...
      if (!state) {
        // ...add .show to it
        clicked.classList.add("show");
      }
    }
  });

在 CSS 中，此規則集使用相鄰的兄弟組合子，相當于.nextElementSibling

圖四

/* .btn.show   .list <=that's the next sibling */
.show .list {
  display: block;
}

已洗掉visibility，并且opacity由于原始狀態是display:none禁止任何型別的開關transition（也已洗掉）。已display: content更改為display: block。display: content沒有任何標準行為，應用時，.items 是黑白的，但一旦替換了它們原來的綠色，就會回傳。作為處理 CSS 的一般規則是，如果您在示例中沒有看到它，請不要使用它，因為可能有充分的理由不使用它。

使用此設定，您不必擔心有多少按鈕/專案，只要它位于祖先標簽內即可。此外，如果您動態添加任何按鈕/專案，它們不需要系結到事件。您只需要一個事件偵聽器來處理您想要偵聽的每個事件。

const menu = document.querySelector(".dropdown");

const btns = document.querySelectorAll('.btn');

menu.addEventListener('click', function(event) {
  const clicked = event.target;
  const current = document.querySelector('.show');
  let state = clicked.matches('.show');
  if (clicked.matches('.btn')) {
    if (current) {
      current.classList.remove('show');
    }
    if (!state) {
      clicked.classList.add("show");
    }
  }
});

.btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.btn:hover {
  background: #000;
  color: #fff;
}

.list {
  display: none;
  background-color: #017575;
}

.show .list {
  display: block;
}

.list>.item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown">

  <div class="btn">One</div>
  <div class="list">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="btn">Two</div>
  <div class="list">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="btn">Three</div>
  <div class="list">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/479510.html

標籤：javascript html css 下拉式菜单菜单项

上一篇：在節點js服務器中列印陣列

下一篇：根據單擊的按鈕ID將正確的Props集注入Modal