jquery點擊展開下來

我想通過點擊圖像（用十字框表示），一個矩形區域將向下展開以顯示信息（切換種類）。我怎樣才能做到這一點。謝謝。jquery點擊展開下來

當我點擊另一個形象，我也想第一個矩形區域將會收回，接下來將擴大（即只有一個矩形區域時）

我想在這裏同樣的效果：themetrust.com/demos/揭示/＃自由，但我真正想要的是灰色區域放在照片的每一行下，並可能期待ajax和rails的實現。你可以使用

The mock up

來源

2011-11-19 The questioner

我想在這裏同樣的效果：http://themetrust.com/demos/reveal/#footloose，但我真正想要的是灰色區域的照片，可能的每一行下把期待ajax和rails的實現。提前致謝。 –

或者像這樣：http://thoughtbot.com/（點擊圖片） –

您還沒有給出太多的信息，但是一個策略是每點擊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/

您可能要檢查出更多的效果下列文件，你可以使用：

來源

2011-11-19 16:08:45

嗨安德魯，這個問題是更新，看看你是否可以提供進一步的幫助... –

@Thequestioner：即使標記會略有不同，效果可能會有所改變，策略不應該改變太多。 –

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'); 
    }); 
});

來源

2011-11-19 16:07:20

<!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>

來源

2011-11-19 16:35:23 thecodeparadox

jquery點擊展開下來

回答

相關問題