水平滑動/切換的divs ..佈局問題..需要幫助

我想完成以下內容：我有一個主要Div（A）在我的頁面中心和1個div（菜單）在任一側Div（A）會觸發點擊按鈕。我使用jQuery來水平滑動邊div /菜單。這是jQuery代碼（信貸Karl Swedberg）：水平滑動/切換的divs ..佈局問題..需要幫助

$(document).ready(function() { 
    $('#trigger1').click(function() { 
    var $marginLefty = $("#B"); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? -$marginLefty.outerWidth() : 0 
    }, 1500, 'swing'); 
    }); 

    $('#trigger2').click(function() { 
    var $marginLefty = $("#C"); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginLefty.outerWidth() : 0 
    }, 1500, 'swing'); 
    }); 
});

什麼我希望實現的是，當側的div /菜單的一個是開放的，分區（A）的寬度將減少（使所有「可見」div都對齊），但會在其中添加一個水平滾動條。兩個菜單都打開時同樣適用。類似this。

我似乎無法弄清楚如何使Div（A）調整它的寬度，以便在菜單打開時出現滾動條，但滾動條消失且Div（A）將其原始寬度設置爲菜單是關閉的。

任何人都可以幫助我用CSS部分來正確地佈置這個，所以我可以實現這個功能？

來源

2011-11-18 Joe S

可能我建議http://layout.jquery-dev.net/index.cfm –

嘗試使用HTML5 data attributes來標記側邊欄是否摺疊，並且每次點擊＃trigger1或#trigger 2時設置寬度。請參閱jsFiddle。這有幫助嗎？

function adjustSize(side) { 

    // Vars 
    var fullWidth = 200; 
    var sideWidth = 50; 
    var obj = $('.'+side); 

    // Get the jQuery object of the side and handle collapsing here 
    if (obj.attr('data-expanded') == "1") { 
     obj.css({'float':'none','clear':'both'}); 
     obj.attr('data-expanded',0); 
    } else { 
     obj.css({'float':'left','clear':'none'}); 
     obj.attr('data-expanded',1); 
    } 

    // Create a filteredWidth 
    var filteredWidth = fullWidth; 
    $('div[data-expanded=1]').each(function() { filteredWidth = filteredWidth - sideWidth; }); 

    // Apply filteredWidth 
    $('.b').width(filteredWidth); 
    $('span').text('I am now: '+filteredWidth); 

}

來源

2011-11-18 18:55:53

感謝that..actually在div（A）的作用就像具有預定寬度的畫布（動態分配）。例如，假設我的頁面寬度是1200px，並且側邊菜單是200px（固定），其中一個在左邊和一個在右邊對齊，那麼如果畫布寬度是500px，那麼它應該居中在頁面中間沒有問題。但是，如果畫布寬度>（1200px - 400px），那麼它應該是800px，並帶有一個內部水平滾動條。 –

水平滑動/切換的divs ..佈局問題..需要幫助

回答

相關問題