-2

这是我创建的小提琴，我的问题是当单击红色、绿色、蓝色 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;

}
4

3 回答 3

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/

于 2013-11-05T02:08:47.483 回答
0

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

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

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

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

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

于 2013-11-05T01:32:33.557 回答
0

这是您所要求的工作小提琴。

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

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

基本上javascript所说的是以下内容：

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

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

3) 选择 id 为 hiddenDiv 的元素并向$('#hiddenDiv') 下滑动 ->$('#hiddenDiv).slideDown()

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

于 2013-11-05T01:33:13.487 回答