конкретные divs id показывает скрытые divs с совпадающим идентификатором

Question

Я пытаюсь иметь «триггер» с определенным class показать скрытый div, который разделяет те же самые class, выбранные из группы. Например, когда вы нажимаете эту:

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

он покажет содержание внутри:

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

Там будет несколько классов, как .products только один. У меня есть логика, но я не уверен, как писать ее в jQuery и писать наиболее эффективным способом. Я знаю, что это будет click(), который отображает скрытый контент. Таким образом, .trigger-children будет иметь display:hidden в css и будет отображаться на клик.

Обратите внимание, что у меня уже есть настройка события щелчка с этой системой. .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>