jQuery:如何向下滑动一个绝对div以及另一个向下滑动的div? [英] jQuery: How to slide down an absolute div along with another div that is sliding down?

问题描述

我有一个文本容器，该容器绝对位于页面底部，在页面上方，有一个显示/隐藏"按钮(也绝对位于该位置).

I have a text container that is absolutely positioned on the bottom of the page and above it, there is a Show/Hide button (which is also absolutely positioned).

在滑动切换时，我需要上下滑动显示/隐藏"按钮以及文本容器.当文本容器向下滑动时，该按钮必须紧随其后，并在页面底部保持可见.当文本容器向上滑动时，按钮必须随之向上滑动.我似乎无法使它正常工作.

I need to slide the Show/Hide button up and down along with the text container when it slide toggles. When the text container slides down, the button must follow it and remain visible at the bottom of the page. When the text container slides up, the button must slide up with it. I can't seem to get this to work.

HTML:

<div class="wrapper">
  <div class="button">
     <span>Hide</span><span style="display:none;">Show</span></div>
  <div class="container">Lorem ipsum dolor sit amet....</div>
</div>

jQuery:

$(".button").click(function () {
  $(this).find("span").toggle();
  $(".container").slideToggle("slow");
});

这是小提琴: http://jsfiddle.net/UDe8r/1/

Here is the fiddle: http://jsfiddle.net/UDe8r/1/

推荐答案

在此处进行演示 http://jsfiddle.net/yeyene/fpPJz/3/

$(document).ready(function(){
    $('.wrapper a').on('click',function(){
        if($(this).text() == 'Show')
            $(this).text('Hide');
        else
            $(this).text('Show');         
        $('.wrapper .content').slideToggle('slow');
    });
});

CSS

.wrapper {
    height: 400px;    
    position: relative;
}
.wrapper #button{
    cursor:pointer;
    position: relative;
    left:0;
    top:0;
    padding:0;
}
.wrapper #button a{
    padding:0 5px;
    text-align:right;
    background:green;
    cursor:pointer;
}
.container{    
    position: absolute;
    bottom:0;
}
.content{
    display:none;
    padding: 10px;
    background-color: #bbb;
}

这篇关于jQuery:如何向下滑动一个绝对div以及另一个向下滑动的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！