更新

Question

我有以下内容。它的工作正常，但我想在隐藏.sidebarmenu时增加.table的大小。我怎样才能做到这一点？？ THIS IS WHAT I HAVE

HTML：

<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu">
    This should go left
</div>
<div class="table">
</div>

JQuery的：

$(document).ready(function () {
    $('#showmenu').click(function () {
        var hidden = $('.sidebarmenu').data('hidden');
        $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
        if (hidden) {
            $('.sidebarmenu').animate({
                left: '0px'
            }, 500)
        } else {
            $('.sidebarmenu').animate({
                left: '-200px'
            }, 500)
        }
        $('.sidebarmenu,.image').data("hidden", !hidden);

    });
});

CSS：

.sidebarmenu {
    position:relative;
    float:left;
    height:500px;
    width:200px;
    background:red;
    left:0px;
}
.table {
    height:500px;
    width:300px;
    background:pink;
    float:left;
    left:20px;
}

Answer 1

我建议你改变你的HTMl标记以及你的CSS。看看这个：http://jsfiddle.net/a2v5J/5/

我添加了wrap并将菜单的位置更改为absolute，同时向padding元素添加table 200px。

<强> HTML

<div id="wrap">
    <div class="sidebarmenu">This should go left</div>
    <div class="table"></div>
</div>

<强> CSS

#wrap {
    float:left;
    position:relative;
}

.sidebarmenu {
    position:absolute; /*added*/
    float:left;
    height:500px;
    width:200px;
    background:red;
    left:0px;  /*added*/
    top:0;/*added*/
}

.table {
    height:500px;
    width:300px;
    background:pink;
    float:left;
    padding-left:200px;   /*added*/
}

更新

生活演示：http://jsfiddle.net/a2v5J/18/

我为.table元素添加了两个动画，以便更改其width和padding属性。

$('.table').animate({
     paddingLeft: '0px',
      width: '500px'
}, 500);

//.....

$('.table').animate({
     paddingLeft: '200px',
     width: '300px'
}, 500);

Answer 2

我改变了你的代码，以便做你想做的事。 http://jsfiddle.net/a2v5J/28/

<强> HTML

     <button id="showmenu" type="button">Hide menu</button>

     <div id="sidemenu" class="sidemenu"> <!-- This is the container that resize-->
       <div id="innermenu" class="innermenu"> <!--This is the container to keep the width of the menucontent-->

         <!-- Here you can put whatever you want-->
         <div class="sidebarmenu">
               This should go left
         </div>
       </div>
     </div>

     <div class="table">
         content
    </div>

<强> CSS

  /* This is following your old structure but adds a overflow to hide the menu content when width is 0 */
  .sidemenu { 
        float:left;
        overflow: hidden;
        width: 200px;
        height: 500px;
      }

  /*this must have the desired width, it is going to be hidden by the overflow of the parent*/
  .innermenu {    
        height: 100%;
        width: 200px;
        background: #bcc1cb;
      }

  /*Just added the height to show it more beautiful*/
  .sidebarmenu {
      height: 100%;
  }

  .table{
      height:500px;
      width:300px;
      background:pink;
      float:left;
      left:20px;
      z-index: 10;
  }

<强> JS

$(document).ready(function() {
      $('#showmenu').click(function() {
      var hidden = $('.sidebarmenu').data('hidden');
      $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
          if(hidden){
          /* One gets smaller and one gets bigger*/
          $('.sidemenu').animate({
              width: '200px'
          },500);
          $('.table').animate({
              width: '300px'
          },500)
      } else {
          $('.sidemenu').animate({
              width: '0px'
          },500);
           $('.table').animate({
              width: '500px'
          },500)
      }
      $('.sidebarmenu,.image').data("hidden", !hidden);

      });
  });

不要使用定位或边距，而是使用宽度。我不得不在菜单上添加两个div。需要保持菜单内容的固定宽度（因此在更改容器尺寸时不会调整大小），外部div用于调整菜单大小并隐藏溢出以隐藏内部菜单

Answer 3

检查this updated right box alignment：

$(document).ready(function() {
    $('#showmenu').click(function() {
    var hidden = $('.sidebarmenu').data('hidden');
    $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
         $('.table').animate({
            left: '20px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)
        $('.table').animate({`enter code here`
            left: '-200px'
        },500)
    }

Answer 4

还为.table添加了动画。请检查此fiddle

$(document).ready(function() {
    $('#showmenu').click(function() {
    var hidden = $('.sidebarmenu').data('hidden');
    $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
         $('.table').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)
        $('.table').animate({
            left: '-200px'
        },500)
    }
    $('.sidebarmenu,.image').data("hidden", !hidden);

    });
});

更新

检查this（再次更新）

您可以为animate方法添加更多选项

$('.table').animate({
            left: '-200px',
            width: '350px'
        },500)

隐藏/显示宽度增加/减少的菜单

4 个答案:

更新

更新