Question

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

我的剧本：

$(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;        
});

Fiddle Demo

Answer 2

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

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>

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

2 个答案:

Fiddle Demo