Question

这是我创建的fiddle，我的问题是当点击红色，绿色，蓝色div时，我需要一个新的div向下滑动并显示其内容，我如何使用Java脚本实现它

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;

}

Answer 1

这可能会更容易

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/

Answer 2

这是我为你制作的小提琴： http://jsfiddle.net/BHMUq/

我只是添加了以下jQuery代码：

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

我还添加了一个div，其中包含标识为contents的内容，并使用以下内容对其进行样式设置：

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

Answer 3

Here是你所要求的工作小提琴。

基本上你需要的JS是这样的：

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

基本上javascript的内容如下：

1）当文档准备好（网站加载完成后）时，请执行以下操作：

2）对于“contact”，“profileimage”，“about”等类，如果单击其中任何一个，请执行以下操作：

3）选择id为hiddenDiv $('#hiddenDiv')的元素并将其向下滑动 - ＆gt; $('#hiddenDiv).slideDown()

您可以为hiddenDiv提供您想要的任何属性，请记住，在css中，您必须将以下行添加到hiddenDiv - ＆gt; display:none

点击时新的div向下滑动

3 个答案: