單擊時重置所有按鈕狀態-有解無憂

我正在構建一個可評估的導航。每個選單項都有一個用于切換子選單的按鈕。

我已經開始作業了，但是當單擊另一個按鈕時，我無法洗掉以前的狀態。

例如，如果您單擊“食物”按鈕，然后單擊“飲料”按鈕，則“食物”子選單仍然可見。

如您所見，我在函式的開頭添加了一個 for 回圈。我期待這會洗掉任何以前的課程。

我在這里做錯了什么，我怎樣才能讓它作業來重置 aria 屬性？

function dropdownButton() {
    var buttons = document.querySelectorAll('.header__button');
    for (var i = 0; i < buttons.length; i  ) {
        buttons[i].addEventListener('click', function () {
            // Remove class
            var removeClass = document.querySelectorAll('.header__button');
            for (var j = 0; j < removeClass.length; j  ) {
                removeClass[j].classList.remove('.header__button--toggled');
            }
            // Toggle button class
            this.classList.toggle('header__button--toggled');
            // Toggle class on next sibling (.header__sub-menu)
            this.nextElementSibling.classList.toggle('header__sub-menu--toggled');
            // Toggle Aria
            var ariaExpanded = this.getAttribute('aria-expanded');
            ariaExpanded === 'true' ? ariaExpanded = 'false' : ariaExpanded = 'true';
            this.setAttribute('aria-expanded', ariaExpanded);
        });
    }
}
dropdownButton();

.header__nav-items {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__nav-item {
  position: relative;
}

.header__sub-menu {
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 12px;
  list-style: none;
}

.header__sub-menu--toggled {
  display: block;
}

<header class="header">
  <nav>
    <ul class="header__nav-items">
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="food" class="header__button">Food</button>
        <ul id="food" class="header__sub-menu">
          <li><a href="/pizza">Pizza</a></li>
          <li><a href="/fries">Fries</a></li>
          <li><a href="/hamburger">Hamburger</a></li>
          <li><a href="/waffles">Waffles</a></li>
        </ul>
      </li>
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="drink" class="header__button">Drink</button>
        <ul id="drink" class="header__sub-menu">
          <li><a href="/coke">Coke</a></li>
          <li><a href="/lemonade">Lemonade</a></li>
          <li><a href="/beer">Beer</a></li>
          <li><a href="/water">Water</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

uj5u.com熱心網友回復：

正如 Kinglish 提到的，你需要移除.內部removeClass[j].classList.remove('.header__button--toggled');

并添加

removeClass[j].nextElementSibling.classList.remove('header__sub-menu--toggled');

在回圈之后

您也不需要使用toggle函式，因為您已經洗掉了類名，您可以改用add類名

function dropdownButton() {
    var buttons = document.querySelectorAll('.header__button');
    for (var i = 0; i < buttons.length; i  ) {
        buttons[i].addEventListener('click', function () {
            // Remove class
            var removeClass = document.querySelectorAll('.header__button');
            for (var j = 0; j < removeClass.length; j  ) {
                removeClass[j].classList.remove('header__button--toggled');
                removeClass[j].nextElementSibling.classList.remove('header__sub-menu--toggled');
            }
            // Toggle button class
            this.classList.add('header__button--toggled');
            // Toggle class on next sibling (.header__sub-menu)
            this.nextElementSibling.classList.add('header__sub-menu--toggled');
            // Toggle Aria
            var ariaExpanded = this.getAttribute('aria-expanded');
            ariaExpanded === 'true' ? ariaExpanded = 'false' : ariaExpanded = 'true';
            this.setAttribute('aria-expanded', ariaExpanded);
        });
    }
}
dropdownButton();

.header__nav-items {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__nav-item {
  position: relative;
}

.header__sub-menu {
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 12px;
  list-style: none;
}

.header__sub-menu--toggled {
  display: block;
}

<header class="header">
  <nav>
    <ul class="header__nav-items">
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="food" class="header__button">Food</button>
        <ul id="food" class="header__sub-menu">
          <li><a href="/pizza">Pizza</a></li>
          <li><a href="/fries">Fries</a></li>
          <li><a href="/hamburger">Hamburger</a></li>
          <li><a href="/waffles">Waffles</a></li>
        </ul>
      </li>
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="drink" class="header__button">Drink</button>
        <ul id="drink" class="header__sub-menu">
          <li><a href="/coke">Coke</a></li>
          <li><a href="/lemonade">Lemonade</a></li>
          <li><a href="/beer">Beer</a></li>
          <li><a href="/water">Water</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

根據您的評論請求，如果您想保留切換功能，您可以修改代碼以檢查當前展開的按鈕是否與單擊的按鈕相同。如果是這樣，將類添加到它

讓我知道修改是否不清楚，但基本上 var ariaExpanded = this.getAttribute('aria-expanded') == 'true';我們知道當前按鈕是否已經展開，以便我們也可以從中洗掉展開的屬性，否則我們在下面的 if 陳述句中添加它

function dropdownButton() {
    var buttons = document.querySelectorAll('.header__button');
   
    for (var i = 0; i < buttons.length; i  ) {
        buttons[i].addEventListener('click', function () {
            // Remove class
           var ariaExpanded = this.getAttribute('aria-expanded') == 'true';
            var removeClass = document.querySelectorAll('.header__button');
            for (var j = 0; j < removeClass.length; j  ) {
                removeClass[j].classList.remove('header__button--toggled');
                removeClass[j].nextElementSibling.classList.remove('header__sub-menu--toggled');
                  removeClass[j].setAttribute('aria-expanded', 'false');
                
            }
            
            if(!ariaExpanded){
              // Toggle button class
              this.classList.add('header__button--toggled');
              // Toggle class on next sibling (.header__sub-menu)
              this.nextElementSibling.classList.add('header__sub-menu--toggled');
              ariaExpanded = 'true';
            }else{
              ariaExpanded = 'false'
            }
           
            this.setAttribute('aria-expanded', ariaExpanded);
        });
    }
}
dropdownButton();

.header__nav-items {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__nav-item {
  position: relative;
}

.header__sub-menu {
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 12px;
  list-style: none;
}

.header__sub-menu--toggled {
  display: block;
}

<header class="header">
  <nav>
    <ul class="header__nav-items">
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="food" class="header__button">Food</button>
        <ul id="food" class="header__sub-menu">
          <li><a href="/pizza">Pizza</a></li>
          <li><a href="/fries">Fries</a></li>
          <li><a href="/hamburger">Hamburger</a></li>
          <li><a href="/waffles">Waffles</a></li>
        </ul>
      </li>
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="drink" class="header__button">Drink</button>
        <ul id="drink" class="header__sub-menu">
          <li><a href="/coke">Coke</a></li>
          <li><a href="/lemonade">Lemonade</a></li>
          <li><a href="/beer">Beer</a></li>
          <li><a href="/water">Water</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

uj5u.com熱心網友回復：

非常快的帖子；根據您的要求和代碼。

修復選擇器以在需要時使用句點
如果沒有單擊按鈕，則修復 aria/remove
Aria 調整代碼以簡化切換真偽字串的條件
使用較少數量的變數.forEach()- 不是這個小數量的性能問題

function setup() {
  const subMenu = 'header__sub-menu--toggled';
  const buttonToggle = 'header__button--toggled';
  document.querySelectorAll('.header__button')
    .forEach(function(button) {
      button.addEventListener('click', function() {
        // is it me?
        let hasClass = this.classList.contains(buttonToggle);
        if (!hasClass) {
          // Remove class
          document.querySelector(".header__nav-items")
            .querySelectorAll('.'   buttonToggle)
            .forEach(function(navItem) {
              navItem.nextElementSibling.classList.remove(subMenu);
              navItem.setAttribute('aria-expanded', "false");
              navItem.classList.remove(buttonToggle);
            });
        }
        // Toggle button class
        this.classList.toggle(buttonToggle);
        // Toggle class on next sibling - subMenu
        this.nextElementSibling.classList.toggle(subMenu);
        // Toggle Aria
        const ariaExpanded = this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true';
        this.setAttribute('aria-expanded', ariaExpanded);
      });
    });
}
setup();

.header__nav-items {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header__nav-item {
  position: relative;
}

.header__sub-menu {
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 12px;
  list-style: none;
}

.header__sub-menu--toggled {
  display: block;
}

<header class="header">
  <nav>
    <ul class="header__nav-items">
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="food" class="header__button">Food</button>
        <ul id="food" class="header__sub-menu">
          <li><a href="/pizza">Pizza</a></li>
          <li><a href="/fries">Fries</a></li>
          <li><a href="/hamburger">Hamburger</a></li>
          <li><a href="/waffles">Waffles</a></li>
        </ul>
      </li>
      <li class="header__nav-item">
        <button aria-expanded="false" aria-controls="drink" class="header__button">Drink</button>
        <ul id="drink" class="header__sub-menu">
          <li><a href="/coke">Coke</a></li>
          <li><a href="/lemonade">Lemonade</a></li>
          <li><a href="/beer">Beer</a></li>
          <li><a href="/water">Water</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

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

標籤：javascript html

上一篇：獲取HTML內容并將其顯示為純文本

下一篇：如何在CSS中添加背景影像？