1

我需要动态更改一个 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);   
    }
});


});
4

1 回答 1

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/

于 2012-11-02T13:09:00.547 回答