Using .slideToggle to pull a hidden div up from the bottom

问题

I can't seem to figure out how to reveal hidden content from the bottom up as opposed to from the top down. I've done some homework on here and came across a solution from jQuery UI, but must be implementing it wrong. Any help is greatly appreciated - new to scripting.

cheers!

Here's what I'm working with

the script:

$(document).ready(function() {
  $('#clientsOpen').click(function() {
     $('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300);
 $(this).toggleClass('clientsClose'); 
  }); // end click
});

the markup:

<div id="clientsDropDown">
<div id="clientsDashboard">
    <p id="clientsCTA">Let's make something beautiful together...<br /><a href="mailto:brockman.eric@gmail.com">brockman.eric@gmail.com</a></p>
</div><!-- /clientsDashboard -->
<p id="clientsOpen">clients</p>
</div><!-- //clientsDropDown -->

The style:

#clientsDropDown {
    bottom:0;
width: 100%;
padding-bottom:2%;
z-index: 100;
}

#clientsOpen {
background: url("images/open.png") no-repeat scroll 68px 10px #414142;
color: #ececec;
cursor: pointer;
float: left;
font-size: 26px;
margin: -2px 0 0 10%;
padding: 0 15px 2px;
text-decoration: none;
width: 63px;
}

#clientsCTA {
background:#414142;
width:100%;
color: #CCCCCC;
text-align:center;
font-size: 46px;
margin: 0;
padding: 30px 0;
text-decoration: none;

}

#clientsDropDown .clientsClose {
background-image: url(images/close.png);
}

#clientsDropDown #clientsDashboard {
display: none;  
}

回答1:

Just add position:absolute; to #clientsDropDown.

jsFiddle example

Or if you want "clients" to sit on top of the popup div, remove the float and position the paragraph above the dashboard div like in this jsFiddle example.

回答2:

Try changing your script to:

$("#clientsOpen").click(function(){
    $("#clientsDashboard").slideToggle();
}, function(){
    $("#clientsDashboard").slideToggle();
});

Yes and of course position the container div to absolute.

回答3:

The actual property that is changing the direction of the reveal animation is the bottom CSS property. If it were changed to top the animation would reveal down rather than up.

Try it for #clientsDropDown in the previous fiddle provided and you will see it in action.

来源：https://stackoverflow.com/questions/14326259/using-slidetoggle-to-pull-a-hidden-div-up-from-the-bottom

标签

jquery

jquery-ui

slidetoggle