SlideToggle问题

Question

当单击箭头图像时，我使用的代码需要滑动()菜单。但是箭头并没有随菜单一起滑动。有人能帮我吗？箭头需要显示在页面的底部。

HTML:

<div id="slider">
    <ul id="frisherVertical">
        <li>Fresher Academy</li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Our Offerings</a></li>
        <li><a href="#">Latest Event</a></li>
        <li><a href="#">Contact us</a></li>
    </ul> 
</div>         

<div class="footer1">
    <div class="footer2">
        <p id = "copyright">All rights are reserved &copy; 2014 | <a href="#" id = "pri_pol">Privacy Policy</a></p>
    </div>
    <div class="slide_menu">            
        <img src="../imgs/up_arrow.png" id="slideArrow"/>  
    </div>    
</div>

jQuery:

$(document).ready(function(){
    $(".footer1").click(function(){                     
        $("#slider").slideToggle("slow");
    });
});

CSS:

.footer1 {
    position:relative;
    top: 460px;
    width:1000px;
    background-color:#FFB919;
}

.footer2 {  
    position:absolute;
    width:1000px;
    background-color:#298CB5;
}

#slider {
    display:none;
    padding: 5px;
    position:absolute;
    top: 990px;
    left: 0px;
}

#copyright {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#FFF;
}

Answer 1

我把你的代码复制到一个小提琴上，它没有工作，但我摆脱了所有的定位东西，它工作得很好。对于像你这样简单的布局，只要坚持定期的定位，除非你真的要做一些奇怪的事情。

这小提琴似乎做滑块-我会让你玩的造型。

CSS

.footer1 {
    background-color:#FFB919;
}

.footer2 {   
    background-color:#298CB5;
}

#slider {
    display:none;
    padding: 5px;
}

#copyright {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#FFF;
}