3

私は次のものを持っています。正常に動作していますが、.sidebarmenu が非表示のときに .table のサイズを大きくしたいと考えています。これどうやってするの？？ これは私が持っているものです

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;
}
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);

      });
  });

配置やマージンは使用せず、幅を使用します。メニューの周りに 2 つの div を追加する必要がありました。メニューのコンテンツを固定幅で保持するために 1 つ必要です (コンテナのサイズを変更してもサイズが変更されません)。外側の div はメニューのサイズを変更するためのもので、内側のメニューを非表示にするためにオーバーフローが非表示になっています。

于 2013-09-23T09:22:10.810 に答える
1

HTMl マークアップと CSS を少し変更することをお勧めします。これを見てください：http://jsfiddle.net/a2v5J/5/

を追加しwrap、メニューの位置を変更して、要素に 200px のabsoluteも追加しました。paddingtable

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を変更するために、要素に 2 つのアニメーションを追加しました。widthpadding

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

//.....

$('.table').animate({
     paddingLeft: '200px',
     width: '300px'
}, 500);
于 2013-09-23T08:57:43.587 に答える