Question

我需要动态更改一个Div的高度，根据另一个div中另一个元素向下滑动的高度而不重新加载，

即当我单击向下滑动元素时，元素必须向下滑动并且在同一实例上必须设置另一个div的高度，因为高度向下滑动并向上滑动，

这是我的代码

$(window).load(function() {
var mainheight = $('.main-content-area').height();
var sideheight = $('.side-bar').height();
if(mainheight > sideheight) {   
$('.side-bar').css('height',  mainheight + 10);
}
else $('.sidebar').css('height', 'auto');
    //Slide toggle for the a page
$('.toggle-row h3').click(function() {
    $(this).next('.row-content').slideToggle(300);
    $(this).children('.right-arrow').toggleClass('down-arrow');
    if (mainheight > sideheight){
        $('.side-bar').css('height', mainheight +10);
    }
    else {
        $('.side-bar').css('height', sideheight);   
    }
});


});

Answer 1

您可以使用jQuery UI实现此目的：

资源：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

HTML：

<div class="mydiv" style="background-color:red;"></div>
<div class="mydiv" style="background-color:green;"></div>
<div class="mydiv" style="background-color:blue;"></div>

的CSS：

div.mydiv { height:100px; width:100px; float:left; }

jQuery的：

$('.mydiv').each(function() {
    var mydiv = $(this);
    var slider = $( "<div id='slider'></div>" ).insertAfter(mydiv).slider({
        animate: true,
        orientation: "vertical",
        range: "min",
        min: 0,       
        max: 400,
        value: mydiv.width() + 1,
        slide: function( event, ui ) {
            mydiv.width(ui.value - 1);
        }
    });
});

小提琴：http://jsfiddle.net/BerkerYuceer/bTtJ5/

向下滑动时，我需要相对于向下滑动高度更改另一个div的高度

1 个答案: