将页面内容向左移动时显示/隐藏右侧面板

Right Panel Show/Hide while moving page content to the left

本文关键字：显示 隐藏 侧面 移动 左移      更新时间：2023-09-26

我有一个右侧面板，可以展开和折叠。当用户单击展开选项时，正文的内容会下降到下方，而不是与面板一起向左滑动。

如何使原始内容也向左滑动？

#panel
{
 height: 500px;
 width: 200px;
 background: black;
 float: right;
 display: none;    
 color: white;
 font-size: xx-large;
}
 #click
{
 height: 70px;
 width: 25px;
 background: #CB5152;
 float: right; 
 margin-top: 200px;
 }

<div id='panel'>
Info
</div>
<div id='click'>
<div id="inner" class="fa fa-calculator fa-lg"></div>
</div>
<script>
$('#click').click(function()
 {
$("#panel").animate({width:'toggle'},500);       
  });
</script>

形式

<div class="container">
  <div class="site-index">
     <div class="body-content">
       <div class="row">
          <div class="col-md-12">
             <form id="wizard_example" action="">

之前http://searcherrorcodes.com/stack/before.PNG

之后http://searcherrorcodes.com/stack/after.PNG

如果表单（或其容器）占据了100%的宽度（col-md-12），则在显示侧板时没有空间向左移动表单。您需要将表单缩小，并将其居中放置在页面上。您也可以将侧面板设置为"position:absolute"（确保z索引高于表单的任何设置。）但是，这将使侧面板显示在表单顶部。

相关文章：