Estoy tratando de alternar la clase del objeto secundario "ul" de un objeto seleccionado, usando el siguiente código. Cuando hago clic en uno de los padres, varias clases secundarias "ul" activan y desactivan la clase en lugar de solo el elemento secundario del objeto seleccionado. Aquí está el código y un ejemplo jsfiddle. Cualquier ayuda sería muy apreciada.
el CSS
.hidden { display:none; }el jquery
$(document).ready(function () { $(".proDocs").click(function() { $(this).children( "ul" ).toggleClass( "hidden" ); }); });el html
<div> <ol type="A"> <li class="proDocs"> Procedures <ul class="hidden"> <li>Upload Pictures</li> </ul> <ol type="a"> <li class="proDocs"> Performance <ul class="hidden"> <li>Upload Pictures</li> </ul> <ol type="I"> <li class="proDocs"> Validation Documents <ul class="hidden"> <li>Upload Pictures</li> </ul> <ol type="i"> <li class="proDocs"> Evaluation <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> <li class="proDocs"> Reports <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> <li class="proDocs"> Certification <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> <li class="proDocs"> Training <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> </ol> </li> <li class="proDocs"> Other Documents <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </div>Dado que tiene varios elementos anidados con la clase .proDocs , lo que ve aquí se llama burbujeo cuando hace clic en un elemento interno, activa la función y después de la función nuevamente para el contenedor superior, ya que tiene la misma clase.
Para evitar este comportamiento, puede usar stopPropagation() , ahora su código:
$(document).ready(function() { $(".proDocs").click(function(e) { e.stopPropagation(); $(this).children("ul").toggleClass("hidden"); }); });Nota: También puedes usar return false o preventDefault() es tu elección y cada uno tiene sus particularidades
gracias por tu pregunta
mira la siguiente solución deseo que esto te ayude
cambia tu html y la formación
<div> <ol type="A"> <li class="proDocs"> Procedures <ul class="hidden"> <li>Upload Pictures</li> <ol type="a"> <li class="proDocs"> Performance <ul class="hidden"> <li>Upload Pictures</li> <ol type="I"> <li class="proDocs"> Validation Documents <ul class="hidden"> <li>Upload Pictures</li> <ol type="i"> <li class="proDocs"> Evaluation <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> <li class="proDocs"> Reports <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> <li class="proDocs"> Certification <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> <li class="proDocs"> Training <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> </ol> </ul> </li> <li class="proDocs"> Other Documents <ul class="hidden"> <li>Upload Pictures</li> </ul> </li> </ol> </ul> </li> </ol> </ul> </li> </ol> </div>y luego cambie el siguiente código con su código javascript
$(document).ready(function () { $(".proDocs").click(function() { $(this).children( "ul:first-child" ).toggleClass( "hidden" ); return false; }); });deseo que esto te ayude
siéntete libre de hacerme cualquier pregunta.