раздвижные панели в петле, открываются все вместе

Я пытаюсь создать для каждого члена моего сайта скользящую панель, на которой показана некоторая информация. Однако у меня нет проблем с отображением панелей, когда я нажимаю на одну из них, все они открываются.
Вероятно, ошибка с тэгом класса, так как при рендеринге у них один и тот же класс.
Как я могу дать уникальные классы для панели? Или я могу подойти к этому вопросу?

Мой код

$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});'

'<?php if ( bp_has_members( "search_terms={$_POST['category']}")) : ?>
<?php while ( bp_members() ) : bp_the_member(); ?>

<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>

<?php endwhile; ?>
<?php endif; ?>

0

Решение

Вы можете использовать JQuery find метод для этого. Вы хотите, чтобы обернуть два divс родителем div, а затем используйте parent метод из вашего нажал flip учебный класс.

$(document).ready(function(){
$(".flip").click(function(){
$(this).parent().find(".panel").slideToggle("slow");
});
});'

'<?php if ( bp_has_members( "search_terms={$_POST['category']}")) : ?>
<?php while ( bp_members() ) : bp_the_member(); ?>

<div class="memberInfo">
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
</div>

<?php endwhile; ?>
<?php endif; ?>

Что будет:

  • Получить родитель клика flip элемент.
  • Найти panel класс внутри
  • выполнять slideToggle в теме
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]