如何通过单击按钮并返回原始形式隐藏其右侧/左侧网格时的全宽网格？

Posted 2021-04-03

我知道如何展示或隐藏一个部分，但却被困住了。我提供截图以便更好地理解。 see image

当我用一个按钮点击隐藏该表单时，我希望左侧表取代右侧表格，然后再按一下按钮点击原始形式。

<div class="row">
<div class="col-md-7 counselingTableDiv" id="counselingTableDivId">
    <h3 class="text-center">Counseling Time Table</h3>
    <div class="table-responsive">
        <table class="table table-bordered" id="counselingTable">
            <thead>
                <tr>
                    <th>Sat</th>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <span id="deleteRoutineData" class="btn btn-success">Delete All Routine Data</span>
        <span class="btn btn-success" id="setNewRoutine">Set New Routine</span>
    </div>
</div>
    <div class="col-md-5 counselingSchedulesDiv" id="counselingSchedulesDivId">
        <div class="well"><h3>Enter Counseling Schedules</h3></div>
        <form action="" method="POST">
            <div class="form-group">
                <label for="day">Day:</label>
                <input type="text" name="day" class="form-control" id="day" placeholder="Day">
            </div>
            <div class="form-group">
                <label for="courseName">Course Name:</label>
                <input type="text" name="courseName" class="form-control" id="courseName" placeholder="Course Name">
            </div>
            <div class="form-group">
                <label for="couseCode">Course Code:</label>
                <input type="text" name="courseCode" class="form-control" id="courseCode" placeholder="Course Code">
            </div>
            <div class="form-group">
                <label for="time">Starting Time:</label>
                <input type="time" name="time" class="form-control" id="time">
            </div>
            <div class="form-group">
                <label for="time">Ending Time::</label>
                <input type="time" name="time" class="form-control" id="time">
            </div>

            <button type="submit" id="submit">Submit</button>
        </form>
    </div>

在这里，当我隐藏咨询计划时，然后咨询桌面将出现全宽。

答案

向我的小朋友FLEX问好你可以用它做更多的事情看下面的演示，使用全屏查看效果，并将按钮类型从submit更改为button。

$(document).ready(function() {
  $("#menu").on('click', function() {
    $("#counselingSchedulesDivId").toggle();
  })
})

.wrapper {
  display: flex;
}

.counselingTableDiv {
  flex-grow: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Here
<i class="fa fa-bars" id="menu"></i>
<div class="wrapper">
  <div class="col-md-7 counselingTableDiv" id="counselingTableDivId">
    <h3 class="text-center">Counseling Time Table</h3>
    <div class="table-responsive">
      <table class="table table-bordered" id="counselingTable">
        <thead>
          <tr>
            <th>Sat</th>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <span id="deleteRoutineData" class="btn btn-success">Delete All Routine Data</span>
      <span class="btn btn-success" id="setNewRoutine">Set New Routine</span>
    </div>
  </div>
  <div class="col-md-5 counselingSchedulesDiv" id="counselingSchedulesDivId">
    <div class="well">
      <h3>Enter Counseling Schedules</h3>
    </div>
    <form action="" method="POST">
      <div class="form-group">
        <label for="day">Day:</label>
        <input type="text" name="day" class="form-control" id="day" placeholder="Day">
      </div>
      <div class="form-group">
        <label for="courseName">Course Name:</label>
        <input type="text" name="courseName" class="form-control" id="courseName" placeholder="Course Name">
      </div>
      <div class="form-group">
        <label for="couseCode">Course Code:</label>
        <input type="text" name="courseCode" class="form-control" id="courseCode" placeholder="Course Code">
      </div>
      <div class="form-group">
        <label for="time">Starting Time:</label>
        <input type="time" name="time" class="form-control" id="time">
      </div>
      <div class="form-group">
        <label for="time">Ending Time::</label>
        <input type="time" name="time" class="form-control" id="time">
      </div>

      <button type="submit" id="submit">Submit</button>
    </form>
  </div>


</div>

以上是关于如何通过单击按钮并返回原始形式隐藏其右侧/左侧网格时的全宽网格？的主要内容，如果未能解决你的问题，请参考以下文章

layui如何左侧点击，右侧显示内容？

使用 TailwindCSS 单击按钮时，使侧边栏从左侧滑入

如何在 CRM 的子网格形式中单击按钮时显示查找窗口？

边距引导网格问题

协议处理程序

如何在左侧按钮上创建一个带有文本并在右侧按钮上与其分开的图标的 JButton