特定的 div id 显示具有匹配 id 的隐藏 div

Question

我正在尝试让具有特定 class 的 "trigger" 显示一个隐藏的 div，该 div 共享从组中选择的相同 class。例如，当您单击此按钮时：

<a class="trigger products">
    Products
</a>

它将显示里面的内容：

<div class="trigger-children products">
    content
</div>

会有多个类，因为 .products 只是一个。我有逻辑，但不确定如何在 jQuery 中编写它，并以最有效的方式编写。我知道这将是一个显示隐藏内容的 click()。因此 .trigger-children 将在 css 中包含 display:hidden 并在点击时显示。

请记住，我已经为这个系统设置了点击事件。 .trigger 目前触发它自己的 click()，它正在做一些不同的事情，所以不确定我是否应该将它们结合起来。具体是做什么的：

$(document).ready(function(){
    $(".trigger").click(function () {
        $(".hidden-content").slideToggle(200);
    });
});

https://jsfiddle.net/RalphLeMouf/ng86b7z3/

Answer 1

这是使用 data-* 属性指定要定位的元素的完美要求，因为它只需要一个单击处理程序就可以保持代码干爽。试试这个：

$(".trigger").click(function() {
  var targetClass = $(this).data('target');
  $(".trigger-children." + targetClass).slideToggle(200);
});

.trigger-children {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="trigger" data-target="products">Products</a>
<a class="trigger" data-target="foo">Foo</a>

<div class="trigger-children products">
  Products content
</div>

<div class="trigger-children foo">
  Foo content
</div>

特定的 div id 显示具有匹配 id 的隐藏 div

specific divs id's showing hidden divs with matching id

jquery

hidden

click