使用.slideToggle從底部拉一個隱藏的div

我似乎無法弄清楚如何從底部向上顯示隱藏的內容，而不是從頂部向下顯示。我在這裏做了一些家庭作業，並且遇到了來自jQuery UI的解決方案，但必須實現它的錯誤。非常感謝任何幫助 - 新手腳本。使用.slideToggle從底部拉一個隱藏的div

乾杯！

這裏就是我與

工作的腳本：

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

標記：

<div id="clientsDropDown"> 
<div id="clientsDashboard"> 
    <p id="clientsCTA">Let's make something beautiful together...<br /><a href="mailto:[email protected]">[email protected]</a></p> 
</div><!-- /clientsDashboard --> 
<p id="clientsOpen">clients</p> 
</div><!-- //clientsDropDown -->

風格：

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

來源

2013-01-14 Eric Brockman

從我可以做出來的，'slideToggle（）'的默認值向上滑動，因此選項'direction：up'不需要。如果你從最上面的答案小提琴中刪除它，它仍然向上滑動。此外，對於'slideToggle（）'函數''direction' [甚至沒有列出的選項]（http://api.jquery.com/slidetoggle/#slideToggle-options）。 – verbumSapienti

只需添加position:absolute;到#clientsDropDown。

jsFiddle example

或者，如果你想要的「客戶」坐在彈出DIV的頂部，去除浮在這jsFiddle example儀表盤格上段定位等。

來源

2013-01-14 20:44:20 j08691

這個功能非常精美，但是當它向上滑動時，它會覆蓋底部的內容，而不是將其他內容向上推出以騰出空間。鑑於它的定位絕對，我想這是沒有辦法的？ –

正確的是，如果你將它放在絕對位置，它會將其從文檔流中取出，以便在頁面滑動時不會推送頁面上的其他內容。 – j08691

好吧，我可以忍受這一點，再次感謝！ –

試着改變你的腳本：

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

是當然還有位置上的容器div來絕對的。

來源

2013-01-14 20:44:50 Learner

啊是的！謝謝@ j08691，這個作品非常漂亮，底部有一個打開的按鈕，當我從文檔頂部使用的腳本中偷取它時，絕對定位是一個教訓。 –

改變透視動畫方向的實際屬性是bottom CSS屬性。如果它被更改爲top，則動畫將顯示爲下而不是向上。

在前面提供的小提琴中嘗試它的#clientsDropDown，你會看到它的行動。

來源

2017-10-02 15:46:11 whodeee

使用.slideToggle從底部拉一個隱藏的div

回答

相關問題