Question

我正在尝试完成以下操作：我的页面中央有一个主Div（A），Div（A）两侧有一个div（菜单），只需点击一下按钮即可切换。我正在使用jQuery水平滑动侧面div /菜单。这是jQuery代码（归功于Karl Swedberg）：

$(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 /菜单打开时，Div（A）的宽度会减小（所有'可见'div都对齐）但会在里面添加一个水平滚动条它的。两个菜单都打开时也是如此。类似于this。

我似乎无法弄清楚如何让Div（A）调整它的宽度，以便在菜单打开时出现滚动条，但滚动条消失，而Div（A）在菜单时取其原始宽度（s）已关闭..

任何人都可以帮我使用CSS部分来正确布局，以便我可以实现这个功能吗？

Answer 1

尝试使用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);

}

水平滑动/切换div ..布局问题。需要帮助

1 个答案: