javascript - 移动左栏时调整 2 栏布局中的内容区域

Question

我有一个 2 列布局，左侧菜单具有固定宽度，我遵循结构如 http://blog.html.it/layoutgala/LayoutGala24.html 中所示.

单击导航菜单时，我试图将其隐藏到某些像素。

当导航菜单动画到左侧时，右侧内容如何自动调整？

JS

$("#navigation").on('click', function() {
  var $el = $(this), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180px";
  }else{
    animateLeft = "+=180px";
  }
  $(this).animate({
    marginLeft : animateLeft
  },500, function() {
    console.log("anim complete");
  });
});

演示 - http://codepen.io/anon/pen/hCmKl

Answer 1

试试这个:

$("#navigation").on('click', function() {
  var $el = $(this), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180px";
  }else{
    animateLeft = "+=180px";
  }
  $(this).animate({
      marginLeft : animateLeft
    },500, function() {
        console.log("anim complete");
    });
  $("#content").animate({
    marginLeft: animateLeft
  }, 500);
});

http://codepen.io/anon/pen/Ikgnm