arrowing在页面加载时隐藏并在点击时显示

Question

我正在制作隐藏和显示功能...... 我的代码中有一个错误.. 当我点击第一个div ...内容从下到上打开... 那个时候只有箭头出现...... 但在页面加载自己它显示箭头..

在下方提供我的代码......

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

 <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

将arrow div移至content div，请参阅小提琴：http://jsfiddle.net/2syzQ/41/

<div id='firstHiddenDiv'><div class="arrow-down"></div>Lorem ipsum dolor sit a...</div>

Answer 2

添加css

.arrow-down 
       {
      display:none;
       }

在'second radio'点击功能

下添加setTimeout功能

 $("#secondRadio").click(function() {
    $("#firstHiddenDiv").hide("slow");
    $("#secondHiddenDiv").show("slow");
    setTimeout(function(){
    $(".arrow-down").show();
    },800);
});

小提琴：

Fiddle