如何通过单击按钮调整 div 大小并变为全屏答案

【问题标题】：how to resize div with click on button and it become full screen如何通过单击按钮调整 div 大小并变为全屏
【发布时间】：2017-10-21 08:14:13
【问题描述】：

我想通过单击 fa-arrows-alt 图标和单击 fa-minus 图标 div.panel 将 div.panel-dashboard 变为全屏并且它的宽度和高度等于窗口的宽度和高度-dashboard 通过动画返回到它的第一个尺寸。

             <div class="row">
   <div class="col-sm-6">
            <section class="panel-dashboard hide1">
                <div class="header color-purple-header">              
                    <div class="controls">
                        <i class="fa fa-close"></i>
                        <i class="fa fa-minus ml5"></i>
                        <i class="fa fa-arrows-alt ml5"></i>
                    </div>
                </div>
                <div class="body body2 color-purple-body">
                    text1
                </div>     
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel-dashboard hide1">
                <div class="header color-purple-header">              
                    <div class="controls">
                        <i class="fa fa-close"></i>
                        <i class="fa fa-minus ml5"></i>
                        <i class="fa fa-arrows-alt ml5"></i>
                    </div>
                </div>
                <div class="body body2 color-purple-body">
                    text2
                </div>     
            </section>
        </div>
    </div>
             $(document).ready(function () {
        $('.fa-arrow-circle-left').click(function () {
            var $win = $(window);         
            $('.panel-dashboard').animate({ height: $win.height() }, 500);
            $('.panel-dashboard').animate({ width: $win.width() }, 500);

        });
        $('.fa-minus').click(function () {
            var $win = $(window);         
            $('.panel-dashboard').animate({ height: 250px }, 500);
            $('.panel-dashboard').animate({ width: '100%' }, 500);

        });
    });

【问题讨论】：

所有 jQuery 方法和 javascript 都在 <script> 标签中
250px 应该被引用。
你可以为它制作一个小提琴吗？

标签： javascript jquery html css jquery-plugins

【解决方案1】：

250px 应该被引用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa-arrow-circle-left">fa-arrow-circle-left</div>
<div class="row">
  <div class="col-sm-6">
    <section class="panel-dashboard hide1">
      <div class="header color-purple-header">
        <div class="controls">
          <i class="fa fa-close"></i>
          <i class="fa fa-minus ml5"></i>
          <i class="fa fa-arrows-alt ml5"></i>
        </div>
      </div>
      <div class="body body2 color-purple-body">
        text1
      </div>
    </section>
  </div>
  <div class="col-sm-6">
    <section class="panel-dashboard hide1">
      <div class="header color-purple-header">
        <div class="controls">
          <i class="fa fa-close"></i>
          <i class="fa fa-minus ml5">fa-minus</i>
          <i class="fa fa-arrows-alt ml5"></i>
        </div>
      </div>
      <div class="body body2 color-purple-body">
        text2
      </div>
    </section>
  </div>
</div>
<script>
  $(document).ready(function() {
    var $win = $(window);
    $('.fa-arrow-circle-left').click(function() {
      $('.panel-dashboard').animate({
        height: $win.height(),
        width: $win.width()
      }, 500);
    });
    $('.fa-minus').click(function() {
      $('.panel-dashboard').animate({
        height: "250px",
        width: '100%'
      }, 500);
    });
  });
</script>

【讨论】：