如何更改 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

如果我正确地解释了您的请求，添加 position: absolute, bottom: 0 到 .text CSS 和 position: relative 到它的容器，应该做你想做的事。

之后您必须调整“隐藏”的位置，以使其看起来整洁。

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

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>