切換向上和向下隱藏的段落;只有一個作品

Question

幾周前我問了一個類似的問題，但我又遇到了同樣的問題，並且無法弄清楚：

我有3個div，帶有自定義的FontAwesome複選框。當我點擊一個複選框時，我想要slideDown（）落在它下面的段落，然後slideUp（）段落，如果它再次點擊。我只能得到一個段落。當我點擊其他2時，第一段仍然滑落，所以我想我的jQuery遍歷有問題。再一次，我仍然是一個初學者，所以感謝任何決議！

HTML：

<div class="serviceOption"> 
    <input id="serviceCheckbox" type="checkbox"> 
    <label for="serviceCheckbox"> Technology Audits</label> 
</div> 
<p id="serviceOptionParagraph"> This is a Tech Audit Paragraph.</p> 


<div class="serviceOption"> 
    <input id="serviceCheckbox" type="checkbox"> 
    <label for="serviceCheckbox"> Email Audits</label> 
</div> 
<p id="serviceOptionParagraph"> This is an Email Audit Paragraph.</p> 

<div class="serviceOption"> 
    <input id="serviceCheckbox" type="checkbox"> 
    <label for="serviceCheckbox"> Service Audits</label> 
</div> 
<p id="serviceOptionParagraph"> This is a Service Audit Paragraph.</p> 

CSS：

.serviceOption{ 
    margin: 5% 0; /* SEPARATES DIVS */ 
} 

input[type="checkbox"]{ 
    display: none; /* HIDES NORMAL CHECKBOXES SO I CANT INSERT CUSTOM ONES */ 
} 

input[type="checkbox"] + label:before{ 
    display: inline-block; 
    font-family: FontAwesome; 
    content: '\f107'; /* ADDS CUSTOM CHECKBOX */ 
    color: #e3ab2f; 
    letter-spacing: 10px; 
    cursor: pointer; 
} 

input[type=checkbox]:checked + label:before{ 
    display: inline-block; 
    font-family: FontAwesome; 
    content: "\f106"; 
    letter-spacing: 10px; 
    color: #e3ab2f; 
} 

#serviceOptionParagraph{ 
    display: none; 
} 

的jQuery：

$('#serviceCheckbox').change(function(){ 
    var nextParagraph= $(this).closest(".serviceOption").next("#serviceOptionParagraph");  
    if (this.checked){ 
     $(nextParagraph).slideDown(200); 
    } else { 
     $(nextParagraph).slideUp(200); 
    } 
}); 

Answer 1

您可以通過具有相同的ID多的東西被遇到了問題。嘗試改變

<p id="serviceOptionParagraph"> This is a Service Audit Paragraph.</p>

到

<p class="serviceOptionParagraph"> This is a Service Audit Paragraph.</p>

和

var nextParagraph= $(this).closest(".serviceOption").next("#serviceOptionParagraph");

到

var nextParagraph= $(this).closest(".serviceOption").next(".serviceOptionParagraph");

---------- -----------以下編輯溶液 '

<div class="serviceOption"> 
    <input id="serviceCheckbox1" class='togglething' type="checkbox"> 
    <label for="serviceCheckbox1"> Technology Audits</label> 
</div> 
<p id="serviceOptionParagraph"> This is a Tech Audit Paragraph.</p> 


<div class="serviceOption"> 
    <input id="serviceCheckbox2" class='togglething' type="checkbox"> 
    <label for="serviceCheckbox2"> Email Audits</label> 
</div> 
<p id="serviceOptionParagraph"> This is an Email Audit Paragraph.</p> 

<div class="serviceOption"> 
    <input id="serviceCheckbox3" class='togglething' type="checkbox"> 
    <label for="serviceCheckbox3"> Service Audits</label> 
</div> 
<p id="serviceOptionParagraph"> This is a Service Audit Paragraph.</p> 

和

$('.togglething').change(function(){ 
    var nextParagraph= $(this).closest(".serviceOption").next("#serviceOptionParagraph");  
    if (this.checked){ 
     $(nextParagraph).slideDown(200); 
    } else { 
     $(nextParagraph).slideUp(200); 
    } 
}); 

`

我爲每個輸入添加了一個類，所以我們仍然可以同時爲它們附加一個更改事件，但是現在它們每個都有自己的唯一ID來附加它們自己的唯一標籤。