Javascript 单击可向下滑动新div

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

这是你的电话号码

HTML

---

这是我为你做的小提琴：

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

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

我还添加了一个div，其中包含id为

contents

的内容，并使用以下内容对其进行了样式化：

#内容{显示：无；高度：40px；清除：两个}

您所要求的内容都可以正常工作

基本上，您需要的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

这可能更容易

jquery

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

html

---

胡闹：

我是JS新手，我只是想知道我该怎么做？我看过很多例子，但没有一个对我有用。如果能在你的小提琴上实现一些JS，那就太好了。我还在努力。你也在使用jQuery，对吗？现在我在谷歌上搜索JS/jQuery。这太棒了！谢谢文件（第10页）随时都可以，很高兴能帮上忙！如果我需要添加这个api，它会工作吗？应该这样。小提琴使用10.1，所以10.2应该可以。

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

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

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

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}