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

合集 - Python Web(14)

1.Django应用创建到启动的简单示例2024-05-252.Django中型项目的目录结构和一个应用创建启动示例2024-05-253.Ubungu+Django简单项目创建代码全2024-05-254.Django+Vue构建前后端分离开发模式2024-05-255.Django和MySQL与Vue项目之间的数据是如何流动实现交互响应的2024-05-266.Django项目中关于静态文件的引用2024-06-277.Django+nginx+静态网站2024-06-308.Django项目中Ajax的应用，博客分类文章阅读，左右栏目自动更新2024-07-159.Ajax代码运行前应该先加载jQuery2024-07-1510.关于css选择器和样式表的应用2024-07-1611.Django项目中使用markdown语法2024-07-1612.关于静态文件目录与模板引用和Nginx location块的适配设置2024-07-16

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

14.Flask与Django返回json数据的等价方法2024-09-27

收起

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 以隐藏内容。

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