javascript - 单击按钮时如何使按钮下的特定 li 出现

Question

首先我想说的是我是编码新手，我知道我的代码不是最高效的，我只是在试验。现在开始提问!

我有一个与 NodeJS 代理通信的 EJS 文件，NodeJS 代理向它发送 JSON 数据进行操作(希望我没说错)。下面的代码对我来说工作正常，我遇到的唯一问题是，当我单击一个按钮时，它会取消隐藏所有的 li，而不仅仅是我单击的按钮下的 li。分配类然后为每个生成的类编写 JavaScript 代码非常困难，因为我不知道一开始会有多少个按钮。

我目前有:

Javascript (jQuery) 代码

  $(document).ready(function(){
   $('button').on('click', function(){
        $('li').toggleClass('hide');
    });
});

HTML/EJS 代码

<% for (i = 0; i < sortedStackName.length; i++) { %>
    <% if (sortedStackName[i] == sortedStackName[i + 1]) { %>
    <% } else { %>
    <button class="btn btn-primary space" id="<%= %>"><%= sortedStackName[i] %></button>
    <% data3.forEach(function (provider) { %>
    <% if (provider['stack_name'] == sortedStackName[i]) { %>
    <a href="#"><li class="hide"><%= provider['service_name'] %></li></a>
    <% }}); %>

我读过的一些帖子没有用:

jQuery display nested ul on click of div in parent li

how to make text appear when a button is clicked

How to make a view appear through animation when a button is clicked?

Trying to make a div appear when a button is clicked

Answer 1

自<a>的数量|标签是可变的，我认为将它们放在 <div> 中然后切换类 div是一个更清洁的解决方案，您也可以在那里使用 Ashkan 的建议。所以你的 EJS 看起来像:

<div class="hide">
<% data3.forEach(function (provider) { %>
<% if (provider['stack_name'] == sortedStackName[i]) { %>
<a href="#"><li><%= provider['service_name'] %></li></a>
<% }}); %>
</div>

在 JQuery 中:

$(document).ready(function(){
   $('button').on('click', function(){
        $(this).next('div').toggleClass('hide');
    });
});

如果可行，请告诉我。