javascript - 根据当前幻灯片高度动态更改 div 的高度

Question

我在以下页面上有一个文本 slider :

链接已删除

我想要做的是让包含的 DIV 在加载包含大量文本的幻灯片时更改它的高度，这样它就不会被 chop 。

                var slides = $('.slide');
                var container = $('#slides ul');
                var elm = container.find(':first-child').prop("tagName");
                var item_width = container.width();
                var previous = 'prev'; //id of previous button
                var next = 'next'; //id of next button
                slides.width(item_width); //set the slides to the correct pixel width
                container.parent().width(item_width);
                container.width(slides.length * item_width); //set the slides container to the correct total width
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();


                //if user clicked on prev button

                $('#buttons a').click(function (e) {
                    //slide the item

                    if (container.is(':animated')) {
                        return false;
                    }
                    if (e.target.id == previous) {
                        container.stop().animate({
                            'left': 0
                        }, 1500, function () {
                            container.find(elm + ':first').before(container.find(elm + ':last'));
                            resetSlides();
                        });
                    }

                    if (e.target.id == next) {
                        container.stop().animate({
                            'left': item_width * -2
                        }, 1500, function () {
                            container.find(elm + ':last').after(container.find(elm + ':first'));
                            resetSlides();
                        });
                    }

                    //cancel the link behavior            
                    return false;

Answer 1

从#slides li 中删除以下行

height: 250px;

您现在应该使用 javascript 来更改“幻灯片”元素的高度。这是一个适用于您的页面的 hack 示例，但您显然应该对其进行一些修饰以适合您的页面。更改幻灯片后运行它。 (也许把它连接到按钮上)

//The second list item seems to be the visible one. This will likely fail with less than 2 items.
var newHeight = document.getElementById("slides").children[0].children[1].clientHeight;
document.getElementById("slides").style.height = newHeight+"px";

获取可见项的高度并相应地更改包含元素的高度。