我有一个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>
答案 0 :(得分:3)
使用$("#top-panel").slideUp();
代替slideToggle()