Estoy tratando de implementar slidetoggle en clase. Tengo muchas clases pero lo mismo. será dinámico, por lo que el nombre de la clase será el mismo, pero tendrá mucho contenido. Pero no funciona. solo quiero cuando hago clic en subtítulo , luego se abre captionbox y cuando hago clic en cerrar , entonces captionbox estará cerca.

<div id="list">
    <ul>
        <li id="arrayorder_42">
            <div class="captionbox">
                <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a>  <a href="#" class="collapsed sbtn_gray">close</a>

            </div>
            <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a>
 <a href="#" class="caption sbtn_gray">caption</a> 
        </li>
        <li id="arrayorder_42">
            <div class="captionbox">
                <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a>  <a href="#" class="collapsed sbtn_gray">close</a>

            </div>
            <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a>  <a href="#" class="caption sbtn_gray">caption</a> 
        </li>
        <li id="arrayorder_42">
            <div class="captionbox">
                <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a>  <a href="#" class="collapsed sbtn_gray">close</a>

            </div>
            <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a>  <a href="#" class="caption sbtn_gray">caption</a> 
        </li>
    </ul>
</div>

Obtuve muchas respuestas en stackoverflow e intenté muchas pero no funcionó realmente. Tal vez me estoy perdiendo algo.

$(".caption").hover(function(){
    $(this).find('.captionbox').slideToggle();
    });

En mi demo tengo muchos códigos js que comenté. Los chicos pueden verificar. http://jsfiddle.net/t2j162bv/1/ demo

-1
pagol 1 sep. 2014 a las 15:14

2 respuestas

La mejor respuesta

En su marcado, captionbox es el hermano del caption por lo que

$('.caption').click(function () {
    $(this).siblings('.captionbox').slideToggle();
});
1
Arun P Johny 1 sep. 2014 a las 11:19

Lo hice finalmente. la demostración es http://jsfiddle.net/t2j162bv/3/

$('.caption').click(function () {
    $(this).siblings('.captionbox').slideToggle();
});
$(".collapsed").click(function(){
     $(this).parent(".captionbox").slideUp('slow');
});

Gracias @arun

0
pagol 1 sep. 2014 a las 15:00