如何更改div文本中的展開/折疊效果的方向？

Question

我想從底部而不是從頂部開始用動畫打開文本：

 function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID+'-hide').style.display = 'inline'; document.getElementById(shID).style.height = '100px'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID+'-hide').style.display = 'none'; document.getElementById(shID).style.height = '0px'; } } } 

 #example { background: red; height: 0px; overflow: hidden; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* Opera */ } a.showLink, a.hideLink { text-decoration: none; background: transparent url('down.gif') no-repeat left; } a.hideLink { background: transparent url('up.gif') no-repeat left; } 

 Here is some text. <div class="readmore"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a> <div id="example" class="more"> <div class="text"> Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div> <p> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a> </p> </div> </div> 

jsFiddle

Answer 1

如果我正確地解釋了您的請求，請在.text CSS上添加position：absolute，bottom：0和相對於其容器的position：相對應的內容。

之后，您必須擺弄“隱藏”的位置才能使它看起來很整潔。

 function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID+'-hide').style.display = 'inline'; document.getElementById(shID).style.height = '100px'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID+'-hide').style.display = 'none'; document.getElementById(shID).style.height = '0px'; } } } 

 #example { background: red; height: 0px; overflow: hidden; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* Opera */ position: relative; } a.showLink, a.hideLink { text-decoration: none; background: transparent url('down.gif') no-repeat left; } a.hideLink { background: transparent url('up.gif') no-repeat left; } .text { position: absolute; bottom: 0; } 

 Here is some text. <div class="readmore"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a> <div id="example" class="more"> <div class="text"> Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div> <p> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a> </p> </div> </div> 

另一種解釋是，您希望整個框從底部打開。 在這種情況下，您需要將框放置在某物的底部以使其可見。 在這種情況下， #example position:absolute; bottom:0 position:absolute; bottom:0

 function showHide(shID) { if (document.getElementById(shID)) { if (document.getElementById(shID+'-show').style.display != 'none') { document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID+'-hide').style.display = 'inline'; document.getElementById(shID).style.height = '135px'; } else { document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID+'-hide').style.display = 'none'; document.getElementById(shID).style.height = '0px'; } } } 

 #example { background: red; height: 0px; overflow: hidden; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari and Chrome */ -o-transition: height 2s; /* Opera */ position: absolute; bottom: 0; width: 100%; } a.showLink, a.hideLink { text-decoration: none; background: transparent url('down.gif') no-repeat left; z-index: 100; position: relative; } a.hideLink { background: transparent url('up.gif') no-repeat left; } 

 Here is some text. <div class="readmore"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a> <div id="example" class="more"> <div class="text"> Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div> <p> <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a> </p> </div> </div>