javascript - 如何更改 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;底部: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>