javascript - 使第二个div从上到下滑动

Question

我正在研究隐藏和显示功能。 我的代码中有一个错误； 当我点击第一个 div 时，内容从下到上打开， 而当我单击第二个 div 时，它会从右向左打开。它应该从上到下打开。 如何解决？

在下面提供我的代码:

http://jsfiddle.net/2syzQ/45/

 <div id='firstRadio'>
        <div class="first" > First </div>
        <div class="arrow-down"></div>
    </div>


$(document).ready(function() {
    $("#firstRadio").click(function() {
        $("#secondHiddenDiv").hide("slow");
        $("#firstHiddenDiv").show("slow");
    });
    $("#secondRadio").click(function() {
        $("#firstHiddenDiv").hide("slow");
        $("#secondHiddenDiv").show("slow");
    });
    $("#thirdRadio").click(function() {
        $("#firstHiddenDiv, #secondHiddenDiv").hide("slow"); 
    });
});

Answer 1

我对您的 HTML 结构做了一些更改。

您可以在此处查看更新:http://jsfiddle.net/2syzQ/51/

HTML:

<div class="first" id='firstRadio'> 
    First 
    <div id='firstHiddenDiv'>
        <div class="arrow-down"></div>
       Text
    </div>
</div>
<div class="second" id='secondRadio'> 
    Second 
    <div id='secondHiddenDiv'>
        <div class="arrow-down"></div>
        Text
    </div>
</div>

对于 CSS:

#container > div { position: relative; } 
.first > div, .second > div { position: absolute; top: 20px; left: 0; }