水平滑动/切换的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 ..布局问题..需要帮助

回答

相关问题