Question

我想点击图像（用十字框表示），矩形区域将向下展开以显示信息（切换的种类）。我怎样才能做到这一点。感谢。

当我点击另一张图片时，我也希望第一个矩形区域缩进，下一个矩形区域将展开（即一次只有一个矩形区域）

我想在这里有类似的效果：themetrust.com/demos/reveal/#footloose，但我真正想要的是放在照片的每一行下面的灰色区域，并且可能期望ajax和rails实现。

The mock up

Answer 1

您没有提供太多信息，但您可以使用的一种策略是将每个可点击的img与将要显示或隐藏的容器相关联：

<div id="images">
    <img src="img_src" data-target="#content1" />
    <img src="img_src" data-target="#content2" />
    <img src="imgs_src" data-target="#content3" />
</div>
<div id="contents">
    <div id="content1" class="active">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
</div>

然后，您可以为每个图像连接一个事件处理程序，检索内容并显示它：

$("#images img").on("click", function () {
    var content = $(this).data("target");
    $("#contents .active").hide("slow", function () {
        $(this).removeClass("active");
        $(content).show("slow", function () {
            $(this).addClass("active");
        });
    });
});

同时切换active课程。

示例： http://jsfiddle.net/k8zCU/

您可能需要查看以下文档，了解可以使用的更多效果：

Answer 2

var contentArray = ['content1', 'content2', 'content3'];

<div class="clickableSquare"></div>
<div class="clickableSquare"></div>
<div class="clickableSquare"></div>

<div id="contentBox">Content1</div>

$('.clickableSquare').click(function(){
    var index = $(this).index();
    $('#contentBox').slideUp('fast', function(){
        $('#contentBox').html(contentArray[index]);
        $('#contentBox').slideDown('fast');
    });
});

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iteracitve Click</title>
<style type="text/css">
.rect
{
    border:1px solid #000;
    width: 50px;
    height:50px;
    margin-left: 50px;
    float:left
}

#container
{
    position:relative;
    display: none
}

#toggler
{
    position:absolute;
}
</style>
</head>

<body>
<div id="rect1" class="rect">Rect 1</div>
<div id="rect2" class="rect">Rect 2</div>
<div id="rect3" class="rect">Rect 2</div>
<div id="container"> 
    <div id="toogler" style="width:200px; height:50px; border:1px solid #000;top:20px; "></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript">
$(function(){
    function display(t) {
        var l = $(t).position().left;
        var w = $(t).width();
        var h = $(t).height();
        $('#container:hidden').animate({
            top: (h + 30) + 'px',
            left: (l + 40) + 'px'
        },50, function(){
            $('#container').show();
        });

    }
    $('.rect').click(function(){
        var that = this;
        if($('#container').is(':visible')) {
            $('#container').fadeOut(100, function(){ 
                display(that);
            });
        } else { 
            display(that);
        }
    });
});
</script>
</body>
</html>

jquery点击向下扩展

3 个答案: