Question

我试图让div下拉/折叠（div在页面打开时打开不隐藏）点击屏幕底部（向下箭头按钮，然后在底部变为uparrow）然后点击uparrow面板滑回原位。我还需要滚动页面。像这个例子：

http://www.bruges-bedandbreakfast.be/eng/

我发现了这个类似的jquery，但它没有掉到页面底部或带有它的按钮！

    <div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This 



.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}



$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div

感谢任何帮助！

Answer 1

试试这个。您可能需要调整一些内容，但它基本上可以满足您的要求。

http://jsfiddle.net/ugebr81y/

基本上：

$(".header").click(function () {

    var newHeight = $('.content').height() + ($('body').height() - $('.container').height());
$(this).next('.content').height(1000).slideToggle(500, function () {


    });

});

需要一个可折叠div的jquery

1 个答案: