laravel 动态显示更多显示更少javascript

ulmd4ohb 于 2022-12-01 发布在 Java

关注(0)|答案(1)|浏览(139)

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

**问题是这样的：**每当我在每个div下单击“显示更多”时，将显示的详细信息是div1。如果我在div2下单击“显示更多，”我如何使div2的详细信息显示出来，如果我在div3下单击“显示更多，”我如何使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

laravel

来源：https://stackoverflow.com/questions/48833179/dynamic-show-more-show-less-javascript

1条答案

按热度按时间

vwkv1x7d1#

你可以做

@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();
});

赞(0）回复(0）举报 2022-12-01

我来回答

laravel 动态显示更多显示更少javascript

1条答案

相关问题

热门标签

最新问答