Question

我正在尝试使用＆＃34;触发器＆＃34;使用特定class显示隐藏的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-*属性指定要定位的元素的完美要求，因为它只需要单击处理程序就可以保留代码DRY。试试这个：

$(".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的div

1 个答案: