Question

我正在尝试创建一些选项卡-带循环。然后，当您单击选项卡名称（即跨度）时，其将展开（或隐藏）位于其下方的下一个跨度。问题在于该功能仅在循环中第一个创建的选项卡中起作用，如果单击第二个/第三个等选项卡，则该功能仅在第一个选项卡上触发。

正在尝试使用querySelector和nextElementSibling，但没有成功。

仅使用ejs模板，express和香草javascript。

这是循环/标签。

<div>   
    <% listedProducts.forEach(function(product) { %>
        <div class="col">
            <span id="info" class="b-d"  onclick="hideReveal()">
                <%= product.name %>
            </span>
            <span>
                <img src="<%= product.logo %>" alt="">
                <p class="r-d"><%= product.supplierCompany %></p>
                <p class="r-d"><%= product.dateListed %></p>
                <p class="r-d"><%= product.dateApproved %></p>
                <p class="r-d"><%= product.supplierName %></p>
            </span>
        </div>
    <% }); %>
</div>

和功能

function hideReveal() {
    var tab = document.getElementById("info");
    if (tab.style.display === "none") {
        tab.style.display = "block";
    } else {
        tab.style.display = "none";
    }
}

请给我一点帮助。谢谢，祝您周末愉快。

Answer 1

在点击处理程序中，传递事件参数，例如function clickHandler(evt)，然后说var thisTab = evt.target.id。假定您在选项卡上具有id属性。然后，您可以切换thisTab的firstElementChild

的打开/关闭类

Vanilla JS：仅显示同一父组中的下一个元素

1 个答案: