Question

几周前我问了一个类似的问题，但我又遇到了同样的问题，并且无法弄清楚：

我有3个带有自定义FontAwesome复选框的div。当我单击一个复选框时，我希望slideDown（）下面的段落，然后如果再次单击该段落则滑动（）。我只能滑下一段。当我单击其他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来附加自己的唯一标签。

向上和向下切换隐藏的段落;只有一个有效

1 个答案: