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