Question

我有一个div显示/隐藏顶部的示例，但我需要从底部到顶部，我试图更改一些代码，但我不能，我没有找到任何示例

<style type="text/css">

#top-panel{
    background:#cc22ff;
    border-bottom:3px solid #a6c34e;
    padding:14px 20px;
    text-align:right;   
}
#sub-panel{
    text-align:center;
}
#sub-panel a{
    width:150px;
    float:right;
    color:#FFFFFF;
    text-decoration:none;
    margin-right:30px;
    font-weight:bold;
    background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
    padding:6px;
    background:url(img/sub-right.png) right bottom no-repeat;
    display:block;

}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
:focus{outline:0}
</style> 


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Lets make the top panel toggle based on the click of the show/hide link  
    $("#sub-panel").click(function(){
        // Toggle the bar up 
        $("#top-panel").slideToggle();  
        // Settings
        var el = $("#shText");  
        // Lets us know whats inside the element
        var state = $("#shText").html();
        // Change the state  
        state = (state == 'Hide' ? '<span id="shText">Mostrar</span>' : '<span id="shText">Ocultar</span>');                    
        // Finally change whats insdide the element ID
        el.replaceWith(state); 
    }); // end sub panel click function
}); // end on DOM
</script> 


<div id="top-panel">
<strong>titulo</strong><br />
contenido
</div>
<div id="sub-panel"><a href="#" id="toggle"><span id="shText">Ocultar</span></a></div>

Answer 1

使用$("#top-panel").slideUp();代替slideToggle()

从下到上显示和隐藏div

1 个答案: