使第二个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; }