循环中的滑动面板，全部打开 - sliding panels in Loop, open all together

sliding panels in Loop, open all together

本文关键字：全部循环 | 更新日期: 2023-09-27

我正试图为我的网站的每个成员创建一个滑动面板，其中显示一些信息。然而，当我点击其中一个时，我可以毫无问题地显示所有面板。这可能是class标记的错误，因为当它们呈现时，它们具有相同的类。如何为面板提供独特的类？或者我可以处理这个问题吗？

我的代码是

$(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; ?>

您可以使用jQuery find方法进行此操作。您需要将两个div封装在父div中，然后使用单击的flip类中的parent方法。

$(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