jquery.childrenは最初の子のみで動作します

Question

.slideToggle()私はそれぞれの親をクリックするとスライドクラスになります。そのためには.children()を使用しています。スニペットに表示されているように、最初のdivでのみ動作します！

私も.find()の代わり.children()を使用したが無駄にしている。:(
誰かが私に私の問題を伝えることができれば、私はそれを感謝しています。同じidを複数回使用し

$(document).ready(function() { 
 
\t $("#open").click(function() { 
 
     $(this).children('#slide').slideToggle(); 
 
    }); 
 
});

*{ 
 
margin:0; 
 
padding:0; 
 
} 
 
body{ 
 
background-color:#ecf0f5; 
 
overflow-x: hidden; 
 
} 
 
.divider { 
 
    height: 1px; 
 
    width:100%; 
 
    display:block; /* for use on default inline elements like span */ 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #9b9b9b; 
 
    margin-top:2px !important; 
 
} 
 
.pointer{ 
 
\t cursor:pointer; 
 
}.slide{ 
 
\t background:#e2e2e2; 
 
\t padding:20px; 
 
\t display:none; 
 
\t margin:10px; 
 
}.full{ 
 
    width:100%; 
 
}.width{ 
 
    width:90%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="full pointer" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;" id="open"> 
 
<input type="checkbox" style="-webkit-transform:scale(1.15);" /><br> 
 
<div class="slide width" id="slide"> 
 
txt 
 
</div> 
 
</div>        
 
<div class="divider" style="margin:0;"></div> 
 
<div class="full pointer" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;" id="open"> 
 
<input type="checkbox" style="-webkit-transform:scale(1.15);" /><br> 
 
<div class="slide width" id="slide"> 
 
txt 
 
</div> 
 
</div>        
 
<div class="divider" style="margin:0;"></div> 
 
<div class="full pointer" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;" id="open"> 
 
<input type="checkbox" style="-webkit-transform:scale(1.15);" /><br> 
 
<div class="slide width" id="slide"> 
 
txt 
 
</div> 
 
</div>        
 
<div class="divider" style="margin:0;"></div>

Answer 1

無効です。jsの部分にclass esを使用すると、正常に動作します。

$(document).ready(function() { 
    $(".open").click(function() { 
    $(this).children('.slide').slideToggle(); 
    }); 
}); 

これをチェックしてフィードバックをお送りください。ありがとう！ documentの要素の

$(document).ready(function() { 
 
    $(".open").click(function() { 
 
    $(this).children('.slide').slideToggle(); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: #ecf0f5; 
 
    font-family: IRANSans; 
 
    overflow-x: hidden; 
 
} 
 
.divider { 
 
    height: 1px; 
 
    width: 100%; 
 
    display: block; 
 
    /* for use on default inline elements like span */ 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #9b9b9b; 
 
    margin-top: 2px !important; 
 
} 
 
.pointer { 
 
    cursor: pointer; 
 
} 
 
.slide { 
 
    background: #e2e2e2; 
 
    padding: 20px; 
 
    display: none; 
 
    margin: 10px; 
 
} 
 
.full { 
 
    width: 100%; 
 
} 
 
.width { 
 
    width: 90%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;"> 
 
    <input type="checkbox" style="-webkit-transform:scale(1.15);" /> 
 
    <br> 
 
    <div class="slide width" id="slide"> 
 
    txt 
 
    </div> 
 
</div> 
 
<div class="divider" style="margin:0;"></div> 
 
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;"> 
 
    <input type="checkbox" style="-webkit-transform:scale(1.15);" /> 
 
    <br> 
 
    <div class="slide width" id="slide"> 
 
    txt 
 
    </div> 
 
</div> 
 
<div class="divider" style="margin:0;"></div> 
 
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;"> 
 
    <input type="checkbox" style="-webkit-transform:scale(1.15);" /> 
 
    <br> 
 
    <div class="slide width" id="slide"> 
 
    txt 
 
    </div> 
 
</div> 
 
<div class="divider" style="margin:0;"></div>

Answer 2

id一意である必要があります。 Yeap！今、それはあなたがfine.thank作品がjavascript

$(document).ready(function() { 
 
    $(".open").click(function() { 
 
    $(this).children(".slide").slideToggle(); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: #ecf0f5; 
 
    font-family: IRANSans; 
 
    overflow-x: hidden; 
 
} 
 
.divider { 
 
    height: 1px; 
 
    width: 100%; 
 
    display: block; 
 
    /* for use on default inline elements like span */ 
 
    margin: 9px 0; 
 
    overflow: hidden; 
 
    background-color: #9b9b9b; 
 
    margin-top: 2px !important; 
 
} 
 
.pointer { 
 
    cursor: pointer; 
 
} 
 
.slide { 
 
    background: #e2e2e2; 
 
    padding: 20px; 
 
    display: none; 
 
    margin: 10px; 
 
} 
 
.full { 
 
    width: 100%; 
 
} 
 
.width { 
 
    width: 90%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;"> 
 
    <input type="checkbox" style="-webkit-transform:scale(1.15);" /> 
 
    <br> 
 
    <div class="slide width" class="slide"> 
 
    txt 
 
    </div> 
 
</div> 
 
<div class="divider" style="margin:0;"></div> 
 
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;"> 
 
    <input type="checkbox" style="-webkit-transform:scale(1.15);" /> 
 
    <br> 
 
    <div class="slide width"> 
 
    txt 
 
    </div> 
 
</div> 
 
<div class="divider" style="margin:0;"></div> 
 
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;"> 
 
    <input type="checkbox" style="-webkit-transform:scale(1.15);" /> 
 
    <br> 
 
    <div class="slide width"> 
 
    txt 
 
    </div> 
 
</div> 
 
<div class="divider" style="margin:0;"></div>