javascript - 如何在 jQuery 中隐藏适当的面板，其中有 2 个具有相同的类？

Question

根据您点击的链接，我试图一次只隐藏一个面板

这是使用 Handlebars 生成的 html

<li>
    <a class="hide-me"><h3>Enterprise</h3></a>
    <ul class="sections">
            {{#each chart-container.[0].enterprise}}
                <li>
                    <a>
                        <span>
                            <img src="{{picture}}" />
                            {{name}} <br> {{role}}
                        </span>
                    </a>
                </li>
            {{/each}}
    </ul>
  </li>

  <li>
    <a class="hide-me"><h3>Consumer</h3></a>
    <ul class="sections">
            {{#each chart-container.[1].consumer}}
                <li>
                    <a>
                        <span class="name-role" id="{{id}}">
                            <img src="{{picture}}" />
                            {{name}} <br> {{role}}
                        </span>
                    </a>
                </li>
            {{/each}}
    </ul>
  </li>

这里是 jQuery

    $('.hide-me').on('click', function() {
      $('.sections').slideToggle();
    });

但显然它隐藏了那个类的每个，在这种情况下我应该怎么做？

Answer 1

您需要找到您要找的人。鉴于这种结构，它看起来像:

var $li = jQuery(this).closest("li"); // Gets the parent li element
var $sections = $li.find(".sections"); // Within that li, finds the sections ul
$sections.slideToggle(); // Applies directly to this element

可能还有其他方法可以到达那里 - jQuery 有很多方法可以访问 DOM - 但我觉得这很干净。

编辑

使用 next 的其他答案应该可以正常工作 - 我避免使用它的原因是因为您可能会操纵列表的外观 - 可能将 anchor 移动到末尾而不是开头，或将图像或其他东西放入其中 - 如果您这样做，您的代码将不再有效。我的方式是，只要您保持基本结构并且不将任何东西移到该结构之外，就可以了。