Question

我有一个功能良好的手风琴列表，可以将新项目添加到列表中，它们将立即具有手风琴功能。虽然，我想一次只打开一个手风琴项目。我找到的所有答案都是静态列表，对解决我的问题没有太大帮助。如果这是一个不好的问题，我深表歉意，但是我已经花了数小时没有运气，而且我也没主意。预先感谢您的帮助。

HTML：HTML还有更多内容。我刚刚添加了相关元素。

<body>
    <div class="container">
        <!-- New accordion item added here -->
    </div>

    <script src="main.js"></script>
</body>

Javascript：

// Get items
const addAccBtn = document.getElementById('addAccBtn');
const container = document.querySelector('.container');

addAccBtn.addEventListener('click', e => {
    e.preventDefault();
    let newAccItem = document.createElement('div');
    newAccItem.innerHTML = `
        <div class="acc-title">
            <i class="fas fa-trash delete"></i>
            <h3 class="header-click">${accName}</h3>
            <i class="fas fa-sort-down down-arrow"></i>
        </div>
        <div class="acc-info hidden">
            <i class="far fa-edit"></i>
            <h4>Section 1</h4>
            <p>${input1}</p>
            <h4>Section 2</h4>
            <p>${input2}</p>
        </div>
    `;

    container.appendChild(newAccItem);

    let downBtn = newAccItem.firstElementChild.childNodes[5]; // .down-arrow
    let info = newAccItem.firstElementChild.nextElementSibling; // .acc-info

    downBtn.addEventListener('click', () => {
        if(downBtn.parentElement.nextElementSibling == info && info.classList.contains('hidden')) {
            info.classList.remove('hidden');
            info.classList.add('active');
        }
        else {
            info.classList.remove('active');
            info.classList.add('hidden');
        }
    });
});

同样，手风琴项目将全部打开和关闭，我希望一次打开一个项目。再次感谢您的宝贵时间。

Answer 1

我相信这些行应该起作用

...
    let downBtn = newAccItem.firstElementChild.childNodes[5]; // .down-arrow
    let info = newAccItem.firstElementChild.nextElementSibling; // .acc-info

    downBtn.addEventListener('click', () => {

        //here you close all opened accordions ---------------
        document.querySelectorAll(".acc-info.active").forEach(element => {
          if (element !== info) {
            element.classList.remove("active");
            element.classList.add("hidden");
          }
        };
        // --------------------------------------

        if(downBtn.parentElement.nextElementSibling == info && info.classList.contains('hidden')) {
            info.classList.remove('hidden');
            info.classList.add('active');
        }
        else {
            info.classList.remove('active');
            info.classList.add('hidden');
        }
    });
});

_编辑_

添加了一个if

如何在动态手风琴列表中一次只打开一个手风琴项目？

1 个答案: