Question

单击箭头图像时，我正在使用需要slidetoggle（）菜单的代码。但箭头不随菜单一起滑动。谁能帮我？箭头需要显示在页面底部。

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

我将你的代码复制到FIDDLE并且它不起作用，但我摆脱了所有定位的东西，它工作正常。对于像你这样的简单布局，只要坚持定期定位，除非你真的要做一些奇怪的事情。

这FIDDLE似乎在进行滑动切换 - 我会让你玩造型。

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;
}

SlideToggle问题

1 个答案: