javascript - 单击文本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>