单击文本javascript时打开和关闭div以显示图像

Question

单击文本http://jsfiddle.net/BfMDL/1/时，我正在使用此javascript打开包含图像的div。

我的脚本：

$(document).ready(function() {
    $('.image_trombi').hide();

    $('.titre').click(function() {
        $('.image_trombi').slideUp();
        $(this).next().slideToggle();
        return false;        
    });
});

我的HTML

<div><a href="#" class="titre">image 1</a><div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-9.jpg" class="trombi_anim"/></div>
<div><a href="#" class="titre">image 2</a><div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-5.jpg" class="trombi_anim"/></div>
<div><a href="#" class="titre">iamge 3</a><div class="image_trombi"><img src="http://lorempixel.com/output/sports-q-c-200-200-5.jpg" class="trombi_anim"/></div>

它工作正常，但我希望在再次单击链接后关闭div。

因此，单击“ image1”，打开图像1，然后再次单击“ image1”，关闭图像1 ...依此类推...

Answer 1

在执行slideToggle（）时仅使用slideToggle() ，而无需对该图像容器进行slideUp() 。

$('.titre').click(function() { 
    $(this).next().slideToggle();
    return false;        
});

小提琴演示

Answer 2

这是我一年前制作的手风琴效果的简单演示 。

JS

(function() {

    var menu = $('#acordion'),
        contents = menu.find('.acordion-content').hide();

    menu.children('li').click( function() {
        contents.slideUp(200);
        $(this).children('.acordion-content:hidden').slideDown(200);
    });
})();

HTML

<ul id="acordion">
    <li>
    <div class="acordion-title">Cosa1</div>
    <img class="acordion-content" src="" />
</li>
<li>
    <div class="acordion-title">Cosa2</div>
    <img class="acordion-content" src="" />
    </li>
<li>
    <div class="acordion-title">Cosa3</div>
    <img class="acordion-content" src="" />
    </li>