3

我有以下。它工作正常，但我想在隐藏 .sidebarmenu 时增加 .table 的大小。我怎样才能做到这一点？？ 这就是我所拥有的

HTML：

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

查询：

$(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;
}
4

4 回答 4

1

我更改了您的代码以执行您想要的操作。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 用于调整菜单大小并隐藏溢出以隐藏内部菜单

于 2013-09-23T09:22:10.810 回答
1

我会建议您更改一点您的 HTMl 标记以及您的 CSS。看看这个：http: //jsfiddle.net/a2v5J/5/

我添加了一个wrap并将菜单的位置更改为向元素absolute添加一个padding200px 的值。table

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);
于 2013-09-23T08:57:43.587 回答
0

检查这个更新的右框对齐：

$(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)
    }
于 2014-01-16T09:54:47.417 回答
-1

还添加了动画.table。检查这个小提琴

$(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);

    });
});

更新

检查这个（再次更新）

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

$('.table').animate({
            left: '-200px',
            width: '350px'
        },500)
于 2013-09-23T09:04:38.907 回答