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

Posted 2023-05-09

【中文标题】如何通过单击按钮调整 div 大小并变为全屏

【英文标题】：how to resize div with click on button and it become full screen

【发布时间】：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 应该被引用。

你可以为它制作一个小提琴吗？

【参考方案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>