折疊手風琴菜單

Question

我在www.keokuk.com上有這個簡單的可折疊菜單 我希望在單擊下一個菜單時關閉上一個菜單。

這是javascript：

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[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";

        }
      });
    }
  </script>

Answer 1

我在您的網站上研究了一個解決方案。

但似乎您在其他 javascript 函數中手動設置了 max-height，因此您可以在注釋行中執行相同的操作。

document.querySelectorAll('.collapsible').forEach(el => {
    el.addEventListener('click', (e) => {
        document.querySelectorAll('.collapsible').forEach(el => { 
            el.classList.remove('active');
            el.nextSibling.nextElementSibling.style.maxHeight = 0; }
        );

        e.target.classList.add('active');
        // Here you just have to reapply max-height to the active 
        // el.nextSibling.nextElementSibling.style.maxHeight = "...px"; 

        console.log(e.target.nextSibling.nextElementSibling);
    })
});

Answer 2

細節在例子中注釋

 // Collect all .switch into an array const switches = [...document.querySelectorAll(".switch")]; // Bind each .switch to the click event switches.forEach(s => s.addEventListener("click", openClose)); // Event handler passes Event Object as default function openClose(event) { // Reference the tag proceeding clicked tag const content = this.nextElementSibling; // Get the height of content let maxHt = content.scrollHeight + 'px'; // Find the index position of clicked tag let index = switches.indexOf(this); // The clicked tag will toggle .active class this.classList.toggle('active'); // Remove .active class from all .switch switches.forEach((btn, idx) => { /* If current index does NOT equal index of clicked tag... ...remove .active */ if (idx != index) { btn.classList.remove('active'); } }); /* If clicked has .active class... ...set style property of max-height using CSS variables */ if (this.classList.contains('active')) { content.style.setProperty('--maxH', maxHt + 'px'); } else { content.style.setProperty('--maxH', '0px'); } }

 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box } :root { font: 300 1.5ch/1.2 'Segoe UI'; --maxH: 0px; } body { width: 100%; min-height: 200%; padding: 15px; } header { width: max-content; margin: 10px 0 0; padding: 5px 10px; border: 3px ridge black; border-radius: 4px; background: #aaa; cursor: pointer; } section { position: relative; max-height: var(--maxH); margin: 0; padding: 5px 10px; border: 3px ridge black; border-radius: 4px; background: #ddd; opacity: 0; } .active+section { z-index: 1; opacity: 1.0; }

 <header class='switch'>Read more...</header> <section> <p>Merchandise Morty, your only purpose in life is to buy &amp; consume merchandise and you did it, you went into a store an actual honest to god store and you bought something, you didn't ask questions or raise ethical complaints you just looked into the bleeding jaws of capitalism and said 'yes daddy please' and I'm so proud of you, I only wish you could have bought more, I love buying things so much Morty. Morty, you know outer space is up right? Are you kidding? I'm hoping I can get to both of them, Rick! And there's no evidence that a Latino student did it.</p> </section> <header class='switch'>Read more...</header> <section> <p>Oh, I'm sorry Morty, are you the scientist or are you the kid who wanted to get laid? Why don't you ask the smartest people in the universe, Jerry? Oh yeah you can't. They blew up. Looossseeerrrrr. I am not putting my father in a home! He just came back into my life, and you want to, grab him and, stuff him under a mattress like last month's Victoria's Secret?! </p> </section>