技术问询：点击切换内容时如何自动关闭已展开元素？

需求：点击按钮切换对应内容的显示/隐藏，打开新内容时自动关闭已展开的其他内容。尝试了以下代码但未生效：

// Get siblings
var contentSiblings = document.querySelectorAll('.content');

// close them before opening new one
if (contentSiblings) {
        contentSiblings.forEach((elem) => {
                if (elem.classList.contains('is-visible')) {
                        hide(elem);
                }
        });
}

当前完整代码如下：

原JavaScript代码 #

// Show/hide filter content
var show = function (elem) {
    elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
    elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {

    // If the element is visible, hide it
    if (elem.classList.contains('is-visible')) {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);
};

// Listen for click events
document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('btn')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the selected content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

}, false);

原CSS代码 #

.content {
    display: none;
    opacity: 0;
    transition: opacity .15s linear;
}

.content.is-visible {
    display: block;
    opacity: 1;
}

原HTML代码 #

<a class="btn" id="btn-one" href="#one">Button one</a>
<a class="btn" id="btn-two" href="#two">Button two</a>
<div class="content" id="one">Content one</div>
<div class="content" id="two">Content two</div>

修改后的实现方案 #

核心逻辑是在显示新内容前先关闭所有已展开项，同时保留点击已展开内容按钮时的关闭功能。修改后的JavaScript代码如下：

// Show/hide filter content
var show = function (elem) {
    elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
    elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
    // 获取所有内容元素
    var allContents = document.querySelectorAll('.content');
    
    // 如果当前内容已展开，直接关闭
    if (elem.classList.contains('is-visible')) {
        hide(elem);
        return;
    }

    // 先关闭所有已展开的内容
    allContents.forEach(item => {
        if (item.classList.contains('is-visible')) {
            hide(item);
        }
    });

    // 再显示当前点击的内容
    show(elem);
};

// Listen for click events
document.addEventListener('click', function (event) {
    // 仅处理按钮点击
    if (!event.target.classList.contains('btn')) return;

    // 阻止链接默认跳转
    event.preventDefault();

    // 获取对应内容元素
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // 执行切换逻辑
    toggle(content);
}, false);

修改说明 #

1. 在toggle函数中先获取所有.content元素；
2. 增加判断：如果当前点击的内容已经展开，直接关闭并终止函数；
3. 未展开时，遍历所有内容项，关闭已标记为is-visible的元素；
4. 最后显示当前点击的内容；
5. CSS和HTML代码无需改动，保持原有样式和结构即可。

这样就能实现点击新按钮时自动关闭其他已展开内容，点击已展开内容的按钮则关闭自身的效果。

内容的提问来源于stack exchange，提问作者Meek