怎么用JQuery点击button达到导航展开的效果

Question

<div class="section_one">       
        <div class="nav">
        <div class="title">imooc<button class="button"></button></div>
        <a href="#" class="active">前端</a>
        <a href="#">java</a>
        <a href="#">ios</a>
        <a href="#">Android</a>
        <a href="#">php</a>
</div>
HTML是这样的var button=$(".button");
var navBlock=$(".nav a");
var isHidden=true;/* 控制切换菜单 */
var blockTop
button.on("click",function(){
    //判断是否已展开，未展开展开，已展开收回
    if(isHidden){
        navBlock.animate({top:'blockTop'})
    }else{
        navBlock.animate({top:0})
    }
    isHidden=!isHidden;
})
我想让每一个a的Top等于index*.7rem，不知道怎么实现

Answer 1

var button=$(".button");
var navBlock=$(".nav a");
var isHidden=true;/* 控制切换菜单 */
button.on("click",function(){
    //判断是否已展开，未展开展开，已展开收回
    if(isHidden){
    navBlock.each(function(index){
var blockTop = index*.7+"rem";
        $(this).animate({top:blockTop});
    });
    }else{
        navBlock.animate({top:0})
    }
    isHidden=!isHidden;
})