單擊另一個 DIV 時隱藏/顯示 div

Question

在我的 foreach 循環中，當單擊第一個 Div 時，我想顯示當前字段的 rest 4 個元素，它應該顯示屬於該值的 rest 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();
    });
});

Answer 1

當您的元素具有 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>