Question

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

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

#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>

FORM

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

BEFORE http://searcherrorcodes.com/stack/before.PNG

AFTER http://searcherrorcodes.com/stack/after.PNG

Answer 1

如果表格（或它的容器）占据宽度的100％（col-md-12），则在显示侧面板时没有空间可以移动表格。您需要缩小表单并将其置于页面中心。您还可以将侧面板设置为“position：absolute”（确保z-index高于表单的任何设置。）但是，这将使侧面板显示在表单的顶部。

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

1 个答案: