Question

我的网站上有一个滑块。

它的基本工作方式在 jsfiddle -

中描述

我编写了代码来将父级的高度设置为内容div的高度。这很好用，直到我介绍了一些内容没有固定的高度，并且在页面上显示时其高度可能会增加。有没有办法，只要内部的内容增加或减少它的高度，我就可以动态地改变这个父div的高度。

HTML -

<div id="slider_container">
<div id="slider">
    <div id="slide1">
        Has content that might increase the height of the div....
    </div>
    <div id="slide2">
        Has content that might increase the height of the div....
    </div>
    <div id="slide3">
        Has content that might increase the height of the div....
    </div>    
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
    I appear after the largest container, irrespective of which one is present....
</div>

JavaScript -

var currSlider = 1;
$('#btnNext').click(function(){
    debugger;
    var margin = $('#slider').css('margin-left');   
    if(parseInt(margin) <= -400) {
        return;
    }
    currSlider++;
    // Moving the slider
    $('#slider').css('margin-left', parseInt(margin) - 200 + 'px');    
    // Resetting the height...
    $('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
    debugger;
    var margin = $('#slider').css('margin-left');
    if(parseInt(margin) >= 0) {
        return;
    }
    currSlider--;
    // Moving to the previous slider
    $('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
    // Resetting the height...
    $('#slider').height($('#slide' + currSlider).height());

});
$('#btnAddText').click(function() {
    $('#slide' + currSlider).text('Hello World'.repeat(100));
});

String.prototype.repeat = function(times) {
   return (new Array(times + 1)).join(this);
};

Answer 1

我希望这个“答案”让你朝着正确的方向前进。由于我现在没有时间全面了解这一点，我希望能为您提供正确的方向。如果你确实找到了如何做到这一点，请给我一个消息，因为我真的想知道^ _ ^

http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types

关于如何使用的示例：（DOMSubtreeModified在我阅读的内容中不适用于IE。因此propertchange事件

$('#slide1').on('DOMSubtreeModified propertychange', function() {
    console.log('test',this);
});

另一种选择是使用MutationObserver：

更新于6-8-2014 15:00 CET

由于我完全误读了原帖，这个答案对于说出最好的答案毫无用处。但是因为问题实际上很容易解决（或者......至少我希望我这次能理解这个问题），我想我会发布一个适用于这种情况的答案：一个内容高度不同的滑块。 / p>

原始滑块有什么问题？您将内容移出容器，这使其隐藏。但是，容器仍会拾取它的高度，因为它只有一个固定的宽度。 '#slider'上的固定高度并没有阻止容器从'＃slide- *'中获取高度。如果你设置容器的高度......一切都会好的： - ）

这是隐藏幻灯片的轮廓，移动'离开画布'：http://i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png

我没有通过完成你的代码修复你的小提琴。我只是重写了它，为您提供了一个更容易维护的滑块。这是一个工作滑块的小提琴，您可以在其中添加和删除幻灯片中的内容：http://jsfiddle.net/3JL2x/3/

Answer 2

只需删除.slide1,2和3中的height属性，然后添加min-height即可。像那样：

#slider > div {
    min-height:200px;
    float:left;
    width : 200px;
}
#slide1 {  
    background-color : red;   
}
#slide2 { 
    background-color: green;    
}
#slide3 {    
    background-color: blue; 
}

实例
http://jsfiddle.net/6h7q9/27/

将父div高度设置为不溢出的内容

2 个答案:

更新于6-8-2014 15:00 CET