He escrito un script y funciona como lo quiero también, pero el selector es horrible, ¿alguien tiene una mejor sugerencia que lo que he hecho con el selector?

¡El guión que escribí trabajando está aquí, pero no es elocuente en absoluto! http://jsfiddle.net/xxsqye3q/

Solo en caso de que el violín desaparezca en algún momento:

$('body').on('click','.js_spec', function(e){
    e.preventDefault();
    $('.file-spec-container').slideUp(200);
    $(this)
    .parent()
    .first()
    .next()
    .children()
    .closest('.file-spec-container:hidden')
    .slideDown(200);
})
1
Iamsamstimpson 29 ago. 2014 a las 18:20

2 respuestas

La mejor respuesta

El elemento objetivo .file-spec-container es un descendiente del próximo hermano del elemento primario actual del elemento

$('body').on('click', '.js_spec', function (e) {
    e.preventDefault();
    var $target = $(this)
        .parent()
        .next()
        .find('.file-spec-container:hidden')
        .slideDown(200);
    $('.file-spec-container').not($target).slideUp(200);
})

Demostración: Fiddle

1
Arun P Johny 29 ago. 2014 a las 14:24

Este es un mejor paso con find:

$('body').on('click','.js_spec', function(e){
    e.preventDefault();
    $('.file-spec-container').slideUp(200);
    $(this)
        .parent().find('.file-spec-container:hidden')
        .slideDown(200);
})

Editar:

Dado que han aparecido algunos comentarios haciéndome dudar de mi respuesta original, ¿tal vez esto lo hace aún más simple?

$('body').on('click', '.js_spec', function (e) {
    e.preventDefault();
    $('.file-spec-container').slideToggle(200);
})
0
Rob Schmuecker 29 ago. 2014 a las 14:33