Question

假设我有3个div已经循环我有div1 div2 div3并且对于每个div我有一个名为“Show More”的按钮，据说如果我点击显示更多div1下的详细信息div1应该出现，如果我点击div2下的更多节目，div2的细节应该出现，如果我点击div3中的更多节目，div3的细节应该出现。

问题是：每当我点击每个div下显示更多内容时，将出现的详细信息为div1。 如果我点击下面的节目更多，我怎么能显示div2的细节？如果我点击了更多的节目，我怎么能显示div3的细节。

示例：

@foreach($detail as $detail)
   Title1: {{ $detail->detail1 }}
   Title2: {{ $detail->detail2 }}
   Title3: {{ $detail->detail3 }}
   <button class="btn btn-warning" data-target="#showthis" data-toggle="collapse">Show More</button>

   <div class="collapse" id="showthis">
      Title4: {{ $detail->detail4 }}
      Title5: {{ $detail->detail5 }}
      Title6: {{ $detail->detail6 }}
   </div>
@endforeach

Answer 1

你可以做到

@foreach($detail as $detail)
<div class="content">
   Title1: {{ $detail->detail1 }}
   Title2: {{ $detail->detail2 }}
   Title3: {{ $detail->detail3 }}
   <button class="btn btn-warning show-more" data-target="#show" data-toggle="collapse">Show More</button>

   <div class="collapse" class="showthis">
      Title4: {{ $detail->detail4 }}
      Title5: {{ $detail->detail5 }}
      Title6: {{ $detail->detail6 }}
   </div>
</div>
@endforeach

在javascript中

$( ".showthis" ).hide();
$('.show-more').click(function() {
    $(this).parent().find('.showthis').show();
});

动态显示更多显示更少的JavaScript

1 个答案: