如何在div文本中更改展开/折叠效果的方向？

Question

我想从底部开始使用动画打开文本，而不是像我一样从顶部打开文本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 1

如果我正确地解释你的请求，将position：absolute，bottom：0添加到.text CSS，并将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

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>