时间戳

首页 > 解决方案 > 单击另一个 DIV 时隐藏/显示 div

javascript - 单击另一个 DIV 时隐藏/显示 div

问题描述

在我的 foreach 循环中，我想在单击第一个 Div 时显示当前字段的其余 4 个元素，它应该显示属于该值的其余 4 个字段（DIV）。

 @foreach ( $reled as $rele )
                <div id="MainD">
                <div class="" id="myDIV">
                    <div id="MainD">{{ $rele->customer_name }}</div>
                </div>
                </div>
                <div style="display: none;" id="ShowD">
                <div class="field-item">
                    <div>{{ $rele->customer_name }}</div>
                    <span class="text-muted text-xs">Full Name</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->amount_word }}</div>
                    <span class="text-muted text-xs">Amount in Words</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->amount_numb }}</div>
                    <span class="text-muted text-xs">Amount in Numbers</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->customer_address }}</div>
                    <span class="text-muted text-xs">Customer Address</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->date_accident }}</div>
                    <span class="text-muted text-xs">Date of Accident</span>
                </div>
                </div>
                @endforeach

请帮助我，我正在尝试 JQuery 切换，但它不起作用，如果有更好的方法，请告诉我。

我的 jQuery 代码：

$(document).ready(function() {
    $('.MainD').on('click', function(){
        $('.ShowD').toggle();
    });
});

标签： javascriptphpjquerylaravel

解决方案

当您的元素具有 ID 属性时，您正在调用 Class 选择器。

见例子。

$(document).ready(function() {
  $('#MainD').on('click', function() {
    $('#ShowD').toggle();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MainD">
  <div class="" id="myDIV">
    <div id="MainD">{{ $rele->customer_name }}</div>
  </div>
</div>
<div style="display: none;" id="ShowD">
  <div class="field-item">
    <div>{{ $rele->customer_name }}</div>
    <span class="text-muted text-xs">Full Name</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->amount_word }}</div>
    <span class="text-muted text-xs">Amount in Words</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->amount_numb }}</div>
    <span class="text-muted text-xs">Amount in Numbers</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->customer_address }}</div>
    <span class="text-muted text-xs">Customer Address</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->date_accident }}</div>
    <span class="text-muted text-xs">Date of Accident</span>
  </div>
</div>

推荐阅读