循环滑动面板，一起打开

Question

我正在尝试为我站点的每个成员创建一个显示一些信息的滑动面板。我在显示面板时没有问题，但是当我点击其中一个时，所有面板都打开了。它可能是 class 标签的错误，因为当它们呈现时它们具有相同的 class。如何为面板提供唯一的 classes？或者我可以解决这个问题吗？

我的密码是

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

Answer 1

您可以为此使用jQuery find 方法。您需要将两个 div 包装在父 div 中，然后使用您单击的 flip class.[=19 中的 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 元素的父元素。
在里面找一个panelclass
对其执行slideToggle

循环滑动面板，一起打开

sliding panels in Loop, open all together

php

wordpress

loops

panel