html中javascript點選事件後顯示或隱藏某些元素時需要點選兩次才生效的原因分析和最佳化

海上华帆發表於2024-07-29
HTMLJavaScript事件

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 以隱藏內容。

這樣，點選一次即可正確顯示或隱藏內容。

相關文章