新div滑落點擊

-2

這裏是我創建的fiddle，我的問題是當紅色，綠色，藍色div被點擊時，我需要一個新的div向下滑動並顯示其內容，我如何實現它使用Java腳本。新div滑落點擊

這裏是fiddle

HTML

<div class="profileimage"> 
</div> 

<div class="about"> 
</div> 

<div class="profile"> 
</div> 

<div class="contact"> 
</div> 

</div>

CSS：

body 
{ 
margin:0; 
padding0; 
background:#262626; 
} 

.content 
{ 
width: 860px; 
height: 483px; 
background-color: #fff; 
position: absolute; 
top:0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
} 

.profileimage 
{ 
width:407px; 
height:150px; 
background:#ececec; 
float:left; 
border-right:1px solid #fff; 
} 

.about 
{ 
width:150px; 
height:150px; 
background:#F26B6B; 
float:left; 
border-right:1px solid #fff; 
} 


.profile 
{ 
width:150px; 
height:150px; 
background:#A8D324; 
float:left; 
border-right:1px solid #fff; 
} 

.contact 
{ 
width:150px; 
height:150px; 
background:#50C0E9; 
float:left; 

}

來源

2013-11-05 Shahil M

由於我是新來的JS，我只是想知道我該怎麼辦呢？我見過很多例子，但都沒有爲我工作。 –

很高興看到一些JS在你的小提琴上實現，只是爲了開始。 – Waclock

我仍在努力。 –

這可能是更容易

jQuery的

$('.about, .profile, .contact').on('click', function() { 
    $(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp(); 
});

HTML

<div class="content"> 
    <div class="profileimage"></div> 
    <div class="about"> 
     <div class="inner">some stuff1</div> 
    </div> 
    <div class="profile"> 
     <div class="inner">some stuff2</div> 
    </div> 
    <div class="contact"> 
     <div class="inner">some stuff3</div> 
    </div> 
</div>

CSS

html, body{margin:0;padding:0} 
.content, .inner{width:860px;position:absolute} 
.content { 
    height: 483px; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
.profileimage,.about,.profile,.contact { 
    height:150px; 
    float:left; 
    border-right:1px solid #FFFFFF 
} 
.about,.profile,.contact{width:150px} 
.profileimage{width:405px} 

/* bg */ 
body{background-color:#262626} 
.content{background-color: #FFFFFF} 
.profileimage{background-color:#ececec} 
.about{background-color:#F26B6B} 
.profile{background-color:#A8D324} 
.contact{background-color:#50C0E9} 

/* added*/ 
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}

做出了小提琴：http://jsfiddle.net/filever10/gTN8W/

來源

2013-11-05 02:08:47 FiLeVeR10

這太超級了！謝謝FiLeVeR10！ :) –

隨時，很高興它幫助！ – FiLeVeR10

如果我需要添加這個API會工作嗎？ –

這是我爲你做了一個小提琴： http://jsfiddle.net/BHMUq/

我只是簡單地添加Ť他以下的jQuery代碼：

$(".about").click(function() { 
    if ($("#contents").is(":visible")) { 
    $("#contents").slideUp(); 
    } else { 
     $("#contents").slideDown(); 
    } 
});

我還添加了包含內容id爲contents一個div以及與此風格是：

#contents {display:none; height:40px;clear:both}

來源

2013-11-05 01:32:33 Ortix92

Here的工作小提琴是自己所需要的東西。

基本上你需要JS是這樣的：

$(document).ready(function(){ 
    $('.contact,.profileimage,.about').click(function(){ 
    $('#hiddenDiv').slideDown(); 
    }); 
});

基本上什麼的JavaScript要說的是以下幾點：

1）當文檔準備好（當網站已完成加載）做到以下幾點：

2）「關於」類的「接觸」，「profileimage」，如果其中任何被點擊執行以下操作：

3）選擇與ID hiddenDiv $('#hiddenDiv')元素並將其向下滑動 - >$('#hiddenDiv).slideDown()

你可以給hiddenDiv你想要的任何屬性，牢記在CSS，你必須將下面一行添加到hiddenDiv - >display:none

來源

2013-11-05 01:33:13 Waclock

新div滑落點擊

回答

相關問題