1

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 に答える