Question

在Laravel的blade.php文件中，我创建了一个类名翻转，当我点击它时会显示一个名为panel的类。这里$ post_list包含从先前控制器中的数据库表收集的一些数据。使用@for我可以创建许多翻转和幻灯片类，但问题是当我点击任何翻转类时，显示所有幻灯片类。如何点击一个翻转类并显示相应的幻灯片类？

以下是创建翻转和面板类的代码

@foreach($post_list as $post_list)
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">
<ul>
<li>
<input type="checkbox" name="selected[]">
<label>
<img src="{{ URL::asset($post_list-->image)}}" />
<p>{{$post_list->id->name}}</p>
</label>
</li>
</ul>
</div>
@endforeach

这是我的javascript代码 -

<script> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
});
});
</script>

Answer 1

您正在切换所有.panel div。您只需要在上下文中使用所需的.panel。

<script> 
    $(document).ready(function(){
        $(".flip").click(function(){
            $(this).next('.panel').slideToggle("slow");
        });
    });
</script>

Answer 2

<script>
$(".flip").click(function(){
    $(this).closest(".panel").slideDown(500, function(){
         // do additional stuff here..
    });
});
</script>

Answer 3

试试这个

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).on('click','.flip',function(){
    $(this).next('.panel').slideToggle("slow");
});
</script>

逐个显示div类

3 个答案: