單擊另一個選項卡時關閉的手風琴-有解無憂

我想我可能已經盯著這個問題太久了，錯過了一些簡單的東西。我可以創建一個可在單擊時打開和關閉每個選項卡的手風琴。但是，當我嘗試修改代碼以使每個選項卡在單擊另一個選項卡時自動關閉時，您單擊的選項卡在單擊后將不再自行關閉。我已經稍微縮短了代碼，稍后會調整 aria 標簽，但是為什么單擊時選項卡不會關閉？活動類沒有被洗掉。

JSFiddle在這里：https ://jsfiddle.net/huz08qts/6/

  document.addEventListener("DOMContentLoaded", () => {
     const toggleClasses = (a) => {
        let collapser = a.querySelector(".accordion-collapser");
        let panel = a.querySelector(".accordion-panel");
        let title = a.querySelector(".accordion-title");
        document.querySelectorAll(".active").forEach(e => e.classList.remove("active"))
      
        if(panel.classList.contains("active")) {
            panel.classList.remove("active");
        } else {
            panel.classList.add("active");

        }
        // title.classList.add("active");

      }
       document.querySelectorAll(".accordion").forEach((a) => {
          a.addEventListener("click", () => toggleClasses(a), false)
      
        });
  })

      html {
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
      }

      .accordion-icon {
        height: 50px;
        width: 50px;
        margin-left: 10px;
      }

      .accordion-group {
        margin-bottom: 21px;
      }

      .accordion-heading {
        padding: 0;
        margin: 0;
        border: 1px solid #cccccc;
        border-top: 0px;
        border-bottom: 0px;
        position: relative;
        display: flex;
        align-items: center;
      }

      .accordion-heading:focus-within {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        outline-style: dotted;
        outline-width: 2px;
      }

      .accordion-group .accordion-heading:first-child {
        border-top: 1px solid #cccccc;
      }

      .accordion-group .accordion:last-child .accordion-heading {
        border-bottom: 1px solid #cccccc;
      }

      .accordion-group .accordion:last-child .accordion-panel {
        border-top: 0;
      }

      .accordion-title {
        color: #363c3e;
        line-height: 1.3em;
        font-weight: 600;
        font-size: 18px;
      }

      .accordion-heading a {
        position: relative;
      }

      .accordion-title:hover {
        color: #00a950;
        cursor: pointer;
      }

      .accordion-heading:hover {
        cursor: pointer;
      }

      .accordion-heading h3:after {
        content: " ";
        background: url("https://i.postimg.cc/13fCTwcc/collapse-icon.png");
        position: absolute;
        top: 50%;
        right: 15px;
        width: 37px;
        height: 37px;
        transform: translateY(-50%) rotate(0);
        transition: transform 0.3s, -webkit-transform 0.3s;
      }

      .accordion-heading h3.active:after {
        transform: translateY(-50%) rotate(-45deg);
      }

      .accordion-collapser {
        display: inline-block;
        color: #363c3e;
        padding: 10px 55px 10px 15px;
        text-decoration: none;
      }
      .accordion-collapser:focus {
        outline: 0px;
      }
      .accordion-collapser:hover {
        color: #00a950;
        text-decoration: none;
      }

      .accordion-panel {
        background: #fbfbfb;
        line-height: 1.42;
        font-size: 16px;
        display: none;
        padding: 15px 55px 15px 25px;
        height: 0px;
        max-height: 0px;
        transition: max-height 0.5s ease-out;
      }

      .accordion-group .accordion:last-child .accordion-panel {
        border-bottom: 1px solid #cccccc;
      }

      .accordion-panel.active {
        border: 1px solid #cccccc;
        border-bottom: 0px;
        display: block;
        /* This will need to be adjusted accordingly once you know the avg elem size */
        /* For transition use only  */
        max-height: 800px;
        height: auto;
        overflow: hidden;
      }

      @media (max-width: 500px) {
        .accordion-heading h3 > a {
          font-size: 16px;
        }

        .accordion-panel {
          font-size: 15px;
        }
      }

   <section class="container">
      <div class="accordion-group" role="tablist" aria-multiselectable="true" id="accordion-mortgage">
        <div class="accordion">
          <div class="accordion-heading" role="tab">
            <img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
            <h3 class="accordion-title">
              <a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
            </h3>
          </div>
          <div class="accordion-panel" role="tabpanel" aria-expanded="false">
            <div class="accordion-body">I am the accordion's body content!</div>
          </div>
        </div>
        <div class="accordion">
          <div class="accordion-heading" role="tab">
            <img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
            <h3 class="accordion-title">
              <a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
            </h3>
          </div>
          <div class="accordion-panel" role="tabpanel" aria-expanded="false">
            <div class="accordion-body">
              <p>
                I am the accordion's body content! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              </p>
              <p>
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
              <ul>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <ul>
                  <li>List item</li>
                  <li>List item</li>

                  <li>List item</li>
                </ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

uj5u.com熱心網友回復：

由于您要洗掉所有active類，因此您無法真正切換它們，除非您首先記住狀態。

document.addEventListener("DOMContentLoaded", () => {
  const toggleClasses = (a) => {
    let collapser = a.querySelector(".accordion-collapser");
    let panel = a.querySelector(".accordion-panel");
    let title = a.querySelector(".accordion-title");
    var flag = panel.classList.contains("active")
    document.querySelectorAll(".active").forEach(e => e.classList.remove("active"))

    if (flag) {
      panel.classList.remove("active");
    } else {
      panel.classList.add("active");

    }
    // title.classList.add("active");

  }
  document.querySelectorAll(".accordion").forEach((a) => {
    a.addEventListener("click", () => toggleClasses(a), false)

  });
})

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-icon {
  height: 50px;
  width: 50px;
  margin-left: 10px;
}

.accordion-group {
  margin-bottom: 21px;
}

.accordion-heading {
  padding: 0;
  margin: 0;
  border: 1px solid #cccccc;
  border-top: 0px;
  border-bottom: 0px;
  position: relative;
  display: flex;
  align-items: center;
}

.accordion-heading:focus-within {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  outline-style: dotted;
  outline-width: 2px;
}

.accordion-group .accordion-heading:first-child {
  border-top: 1px solid #cccccc;
}

.accordion-group .accordion:last-child .accordion-heading {
  border-bottom: 1px solid #cccccc;
}

.accordion-group .accordion:last-child .accordion-panel {
  border-top: 0;
}

.accordion-title {
  color: #363c3e;
  line-height: 1.3em;
  font-weight: 600;
  font-size: 18px;
}

.accordion-heading a {
  position: relative;
}

.accordion-title:hover {
  color: #00a950;
  cursor: pointer;
}

.accordion-heading:hover {
  cursor: pointer;
}

.accordion-heading h3:after {
  content: " ";
  background: url("https://i.postimg.cc/13fCTwcc/collapse-icon.png");
  position: absolute;
  top: 50%;
  right: 15px;
  width: 37px;
  height: 37px;
  transform: translateY(-50%) rotate(0);
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.accordion-heading h3.active:after {
  transform: translateY(-50%) rotate(-45deg);
}

.accordion-collapser {
  display: inline-block;
  color: #363c3e;
  padding: 10px 55px 10px 15px;
  text-decoration: none;
}

.accordion-collapser:focus {
  outline: 0px;
}

.accordion-collapser:hover {
  color: #00a950;
  text-decoration: none;
}

.accordion-panel {
  background: #fbfbfb;
  line-height: 1.42;
  font-size: 16px;
  display: none;
  padding: 15px 55px 15px 25px;
  height: 0px;
  max-height: 0px;
  transition: max-height 0.5s ease-out;
}

.accordion-group .accordion:last-child .accordion-panel {
  border-bottom: 1px solid #cccccc;
}

.accordion-panel.active {
  border: 1px solid #cccccc;
  border-bottom: 0px;
  display: block;
  /* This will need to be adjusted accordingly once you know the avg elem size */
  /* For transition use only  */
  max-height: 800px;
  height: auto;
  overflow: hidden;
}

@media (max-width: 500px) {
  .accordion-heading h3>a {
    font-size: 16px;
  }
  .accordion-panel {
    font-size: 15px;
  }
}

<section class="container">
  <div class="accordion-group" role="tablist" aria-multiselectable="true" id="accordion-mortgage">
    <div class="accordion">
      <div class="accordion-heading" role="tab">
        <img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
        <h3 class="accordion-title">
          <a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
        </h3>
      </div>
      <div class="accordion-panel" role="tabpanel" aria-expanded="false">
        <div class="accordion-body">I am the accordion's body content!</div>
      </div>
    </div>
    <div class="accordion">
      <div class="accordion-heading" role="tab">
        <img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
        <h3 class="accordion-title">
          <a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
        </h3>
      </div>
      <div class="accordion-panel" role="tabpanel" aria-expanded="false">
        <div class="accordion-body">
          <p>
            I am the accordion's body content! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          </p>
          <p>
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
          </p>
          <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <ul>
              <li>List item</li>
              <li>List item</li>

              <li>List item</li>
            </ul>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

uj5u.com熱心網友回復：

我對您的代碼進行了以下更改，現在作業正常

添加了保存單擊手風琴狀態的布爾標志（在所有內容關閉之前）
使用這個標志來設定手風琴的狀態（在一切都關閉之后）

        let isActive= panel.classList.contains("active");
        document.querySelectorAll(".active").forEach(e => e.classList.remove("active"))
      
        if(!isActive) {
            panel.classList.add("active");
        }

JS 小提琴：https ://jsfiddle.net/aadeshk/Lb04v7qe/

uj5u.com熱心網友回復：

您需要使用closest到達父級accordion然后獲取accordion-panel
當您在當前面板panel之后從其他 s中洗掉活動類時filter
您可以使用classList.toggle代替if/else條件。

document.addEventListener("DOMContentLoaded", () => {
     const toggleClasses = (a) => {
        let collapser = a.querySelector(".accordion-collapser");
        let panel = a.closest('.accordion').querySelector(".accordion-panel");
        let title = a.closest('.accordion').querySelector(".accordion-title");
        [...document.querySelectorAll(".active")].filter(i => i !== panel).forEach(e => e.classList.remove("active"))
        panel.classList.toggle("active")
      }
       document.querySelectorAll(".accordion").forEach((a) => {
          a.addEventListener("click", () => toggleClasses(a), false)
      
        });
  })

html {
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
      }

      .accordion-icon {
        height: 50px;
        width: 50px;
        margin-left: 10px;
      }

      .accordion-group {
        margin-bottom: 21px;
      }

      .accordion-heading {
        padding: 0;
        margin: 0;
        border: 1px solid #cccccc;
        border-top: 0px;
        border-bottom: 0px;
        position: relative;
        display: flex;
        align-items: center;
      }

      .accordion-heading:focus-within {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        outline-style: dotted;
        outline-width: 2px;
      }

      .accordion-group .accordion-heading:first-child {
        border-top: 1px solid #cccccc;
      }

      .accordion-group .accordion:last-child .accordion-heading {
        border-bottom: 1px solid #cccccc;
      }

      .accordion-group .accordion:last-child .accordion-panel {
        border-top: 0;
      }

      .accordion-title {
        color: #363c3e;
        line-height: 1.3em;
        font-weight: 600;
        font-size: 18px;
      }

      .accordion-heading a {
        position: relative;
      }

      .accordion-title:hover {
        color: #00a950;
        cursor: pointer;
      }

      .accordion-heading:hover {
        cursor: pointer;
      }

      .accordion-heading h3:after {
        content: " ";
        background: url("https://i.postimg.cc/13fCTwcc/collapse-icon.png");
        position: absolute;
        top: 50%;
        right: 15px;
        width: 37px;
        height: 37px;
        transform: translateY(-50%) rotate(0);
        transition: transform 0.3s, -webkit-transform 0.3s;
      }

      .accordion-heading h3.active:after {
        transform: translateY(-50%) rotate(-45deg);
      }

      .accordion-collapser {
        display: inline-block;
        color: #363c3e;
        padding: 10px 55px 10px 15px;
        text-decoration: none;
      }
      .accordion-collapser:focus {
        outline: 0px;
      }
      .accordion-collapser:hover {
        color: #00a950;
        text-decoration: none;
      }

      .accordion-panel {
        background: #fbfbfb;
        line-height: 1.42;
        font-size: 16px;
        display: none;
        padding: 15px 55px 15px 25px;
        height: 0px;
        max-height: 0px;
        transition: max-height 0.5s ease-out;
      }

      .accordion-group .accordion:last-child .accordion-panel {
        border-bottom: 1px solid #cccccc;
      }

      .accordion-panel.active {
        border: 1px solid #cccccc;
        border-bottom: 0px;
        display: block;
        /* This will need to be adjusted accordingly once you know the avg elem size */
        /* For transition use only  */
        max-height: 800px;
        height: auto;
        overflow: hidden;
      }

      @media (max-width: 500px) {
        .accordion-heading h3 > a {
          font-size: 16px;
        }

        .accordion-panel {
          font-size: 15px;
        }
      }

<section class="container">
      <div class="accordion-group" role="tablist" aria-multiselectable="true" id="accordion-mortgage">
        <div class="accordion">
          <div class="accordion-heading" role="tab">
            <img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
            <h3 class="accordion-title">
              <a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
            </h3>
          </div>
          <div class="accordion-panel" role="tabpanel" aria-expanded="false">
            <div class="accordion-body">I am the accordion's body content!</div>
          </div>
        </div>
        <div class="accordion">
          <div class="accordion-heading" role="tab">
            <img src="https://i.postimg.cc/4xBs2Fjm/icons8-corgi-60.png" class="accordion-icon" />
            <h3 class="accordion-title">
              <a role="button" class="accordion-collapser" aria-expanded="false" data-parent="#accordion-mortgage" href="#">Lorem Ipsum</a>
            </h3>
          </div>
          <div class="accordion-panel" role="tabpanel" aria-expanded="false">
            <div class="accordion-body">
              <p>
                I am the accordion's body content! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              </p>
              <p>
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
              <ul>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <ul>
                  <li>List item</li>
                  <li>List item</li>

                  <li>List item</li>
                </ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

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

標籤：javascript html css 事件事件处理

上一篇：我無法將動態資料附加到我的JSON檔案

下一篇：如何通過某些道具對物件陣列進行分組并保留原始物件屬性