如何在点击按钮时显示按钮下的特定Li

Question

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>
    <% }}); %>

我读过的一些不起作用的帖子：

如何在单击按钮时通过动画显示视图？

尝试在单击按钮时显示div

Answer 1

由于标记的数量是可变的，我认为将它们放在

中，然后为该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');
    });
});

如果有用就告诉我。