单击打开按钮后创建不必要的空间

Question

我正在尝试使用jquery和css制作幻灯片菜单。但我有一个关闭开放部分的问题。

当我点击.left-sidebar-menu的打开按钮时，它会从.left-sidebar-menu左侧打开一个不需要的空间。我怎么能解决它，任何人都可以帮助我吗？

＆＃13;

＆＃13;

$(document).ready(function() {
   var win = $box = $('.left-sidebar-menu');

   $('.js-open-callback').on('click', function(event) {
      event.stopPropagation();
      /* $(".left-sidebar-menu").toggleClass("open-right");*/
      jQuery.fn.blindRightToggle = function(duration, easing, complete) {
         return this.animate({
            marginLeft: -(parseFloat(this.css('marginLeft'))) < 0 ? 0 : this.outerWidth()
         }, jQuery.speed(duration, easing, complete));
      };
      $box.blindRightToggle('slow');
	   $box.toggleClass("open-right");
   });
});

＆＃13;

.header {
    position: relative;
    padding: 15px 15px 0px 0px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   background-color:#1e88e5;
   height:50px;
}
.containerMain {
    position: relative;
    width: 100%;
    max-width: 1050px;
    margin: 0px auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.left-sidebar-menu {
    float: left;
    position: relative;
    width: 100%;
    max-width: 40px;
    min-width: 40px;
    min-height: 500px;
   background-color:#8e24aa;
}
.posts-container {
    position: relative;
    float: left;
    width: 100%;
    max-width: 700px;
    min-height: 900px;
    padding-left: 35px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   background-color:#d81b60;
}

@media screen and (max-width:970px) {
  .right-sidebar {
    display:none;	  
  }	
  .posts-container {
    max-width: 744px;
    min-height: 900px;
    padding-left: 108px;
}
}
@media screen and (max-width:840px) {
 
  .posts-container {
    max-width: 700px;
    min-height: 900px;
    padding-left: 35px;
	padding-right: 21px;
}
}
@media screen and (max-width:580px) {
 
  .left-sidebar-menu {
    visibility:hidden;
	opacity:0;	  
}
.open-right {
  visibility:visible;
  opacity:1;	
}
.posts-container {
    max-width: 700px;
    min-height: 900px;
    padding-left: 15px;
	padding-right: 18px;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas">
<div class="header"><div class="js-open-callback">OPEN</div></div>
<div class="containerMain">
   <div class="left-sidebar-menu"></div>
   <div class="posts-container">ss</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该使用padding-left代替margin-left，这会导致左侧的空白区域。

Answer 2

只需使用

替换要传递给margingLeft的对象中的this.animate()属性

paddingLeft: -(parseFloat(this.css('paddingLeft'))) < 0 ? 0 : this.outerWidth()

$(document).ready(function() {
   var win = $box = $('.left-sidebar-menu');

   $('.js-open-callback').on('click', function(event) {
      event.stopPropagation();
      /* $(".left-sidebar-menu").toggleClass("open-right");*/
      jQuery.fn.blindRightToggle = function(duration, easing, complete) {
         return this.animate({
            paddingLeft: -(parseFloat(this.css('paddingLeft'))) < 0 ? 0 : this.outerWidth()
         }, jQuery.speed(duration, easing, complete));
      };
      $box.blindRightToggle('slow');
	   $box.toggleClass("open-right");
   });
});

.header {
    position: relative;
    padding: 15px 15px 0px 0px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   background-color:#1e88e5;
   height:50px;
}
.containerMain {
    position: relative;
    width: 100%;
    max-width: 1050px;
    margin: 0px auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.left-sidebar-menu {
    float: left;
    position: relative;
    width: 100%;
    max-width: 40px;
    min-width: 40px;
    min-height: 500px;
   background-color:#8e24aa;
}
.posts-container {
    position: relative;
    float: left;
    width: 100%;
    max-width: 700px;
    min-height: 900px;
    padding-left: 35px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   background-color:#d81b60;
}

@media screen and (max-width:970px) {
  .right-sidebar {
    display:none;	  
  }	
  .posts-container {
    max-width: 744px;
    min-height: 900px;
    padding-left: 108px;
}
}
@media screen and (max-width:840px) {
 
  .posts-container {
    max-width: 700px;
    min-height: 900px;
    padding-left: 35px;
	padding-right: 21px;
}
}
@media screen and (max-width:580px) {
 
  .left-sidebar-menu {
    visibility:hidden;
	opacity:0;	  
}
.open-right {
  visibility:visible;
  opacity:1;	
}
.posts-container {
    max-width: 700px;
    min-height: 900px;
    padding-left: 15px;
	padding-right: 18px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas">
<div class="header"><div class="js-open-callback">OPEN</div></div>
<div class="containerMain">
   <div class="left-sidebar-menu"></div>
   <div class="posts-container">ss</div>
</div>
</div>