html中javascript点击事件后显示或隐藏某些元素时需要点击两次才生效的原因分析和优化

html中javascript点击事件后显示或隐藏某些元素时需要点击两次才生效的原因分析和优化。
原来的代码如下：

<div class="card card col-sm-6 col-md-4 col-xl-2 col-lg-2 justify-content-center bg-secondary-subtle"
         id="tools-trigger">
        <a href="javascript:void(0);" onclick="toggleToolsVisibility('tools-container')" title="AI工具集">
            <div class="card-body py-2 px-3">
                <img src="{% static 'app1/img/web-favicon/2530806_general_office_repair_repair tool_screwdriver_icon.svg' %}"
                     alt=""/>
                <span>工具</span>
            </div>
        </a>
    </div>
    <div class="row links-tools" id="tools-container">
        <div class="card">
            <a href="https://www.yuque.com/yihulaojiu-gsfg9/zz2qv5/vixkf6" target="_blank" title="Adobe">
                <div class="card-body py-2 px-3">
                    <img src="{% static 'app1/img/web-favicon/adobe.svg' %}" alt=""/>
                    <span>Adobe全家桶</span>
                </div>
            </a>
        </div>
    </div>
与下方js配合
function toggleToolsVisibility(containerId) {
    let cards = document.querySelectorAll(`#${containerId} .card`);
    cards.forEach(function (card) {
        if (card.id !== `${containerId}`) {
            card.style.display = card.style.display === 'block' ? 'none' : 'block';
        }
    });
}

点击两次才能显示隐藏的内容，问题出在 toggleToolsVisibility 函数的实现上。当前的逻辑是遍历 #tools-container 下的所有 .card 元素，并根据它们的显示状态进行切换。然而，这个逻辑并没有考虑到初始状态下某些元素可能是隐藏的，因此需要点击两次才能正确显示或隐藏内容。

我们可以通过检查元素的 display 属性来确定它们是否可见，并在第一次点击时将其设置为可见。以下是改进后的代码：

<div class="card col-sm-6 col-md-4 col-xl-2 col-lg-2 justify-content-center bg-secondary-subtle" id="tools-trigger">
    <a href="javascript:void(0);" onclick="toggleToolsVisibility('tools-container')" title="AI工具集">
        <div class="card-body py-2 px-3">
            <img src="{% static 'app1/img/web-favicon/2530806_general_office_repair_repair tool_screwdriver_icon.svg' %}" alt=""/>
            <span>工具</span>
        </div>
    </a>
</div>
<div class="row links-tools" id="tools-container" style="display: none;">
    <div class="card">
        <a href="https://www.yuque.com/yihulaojiu-gsfg9/zz2qv5/vixkf6" target="_blank" title="Adobe">
            <div class="card-body py-2 px-3">
                <img src="{% static 'app1/img/web-favicon/adobe.svg' %}" alt=""/>
                <span>Adobe全家桶</span>
            </div>
        </a>
    </div>
</div>

function toggleToolsVisibility(containerId) {
    let container = document.getElementById(containerId);
    if (container.style.display === 'none' || container.style.display === '') {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

解释

1. HTML 部分:

   • 将 #tools-container 的初始 display 样式设置为 none，这样它在一开始是隐藏的。

2. JavaScript 部分:

   • 获取 #tools-container 元素。
   • 检查 container.style.display 的值，如果它是 none 或空字符串（初始状态），则将其设置为 block 以显示内容。
   • 如果 container.style.display 是 block，则将其设置为 none 以隐藏内容。

这样，点击一次即可正确显示或隐藏内容。