0

ボタンをクリックすると、下から上にスライドしtoggleたい。ただし、一番下にとどまって、コンテンツが重ならないようにすることはできません。どうすればこれを修正できますか?#upper#lower#upper

JS フィドル: http://jsfiddle.net/4k6du/136/

問題のページ: http://keebs.com/sandbox

HTML

<div id="upper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
</div>

<div id="lower">
    <div id="toggle-div">
    <a href="#" id="toggle">button</a>
    </div>

    <div id="panel">
        <p>Panel - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
    </div>
    <div id="copyright">
        copyright info
    </div>
</div>

CSS

#upper {
    position: relative;
}

#lower {
    width: 90%;
    position: absolute;
    bottom: 0;
}

#toggle-div {
    padding: 10px;
    background:#666;
}

#panel {
    display: none;
/*    height: 100px;*/
    background-color: #aaaaaa;
    padding: 10px;
}
#copyright {
    width:100%;
    background:#222;
    height:40px;
}

JS

$("#toggle").click(function() {
    if ($('#panel').css('display') == 'block') {
        var height = '-=' + $('#panel').height();
    } else {
        var height = '+=' + $('#panel').height();
    }
    $("#panel").slideToggle("slow");
    $("#upper").animate({
        bottom: height
    }, "slow")
});
4

1 に答える 1

1

ここでの主な目的は、新しいコンテンツが表示されたことをユーザーに知らせることです。希望する方法でこれを達成することは可能ですが、次のようにもっと簡単なことを試すことをお勧めします。

http://jsfiddle.net/mDBbE/2/

$('#toggle').click(function(e) {
    e.preventDefault();
    var $el = $('.slide-container');
    if($el.is(':visible'))
    {
        $el.slideUp(300);
    } else {
        $el.slideDown(300);
        scrollToContent($el);
    }
});

function scrollToContent($el) {
    $('html, body').animate({ scrollTop: $el.offset().top }, 600);
}
于 2013-04-20T23:51:54.707 に答える