隐藏/切换 div 动画无法正常工作并在侧边栏外部单击时关闭

Question

您好，我在显示动画和隐藏特别宽度的 div 时遇到问题。 maincontent div 应该占据所有 100% 的宽度，并且当侧边栏显示时它会向右。当侧边栏关闭时，maincontent 会回到 100% 的宽度。当我点击 maincontent div 时如何关闭侧边栏？

这是小提琴。 http://jsfiddle.net/8nhmU/

脚本

$(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        marginLeft: "150px",
        opacity: "1"
      }, 'medium');
       $('#maincontent').animate({
        marginLeft: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = true;
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#maincontent').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });
});

CSS

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

.framecontentLeft, #framecontentTop{
position: absolute; 
top: 0; 
left: 0; 
width: 150px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: silver;
color: #000;
}

#framecontentTop{ 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: green;
color: white;
}

#maincontent{
position: fixed; 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 

    background: radial-gradient(ellipse at center center , rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(237, 237, 237) 100%) repeat scroll 0% 0% transparent;
    border-color: rgb(154, 205, 50);
    padding-top: 10px;
    padding-bottom:10px;
    z-index: 1;
    border-width: 20px medium 20px;
    border-style: solid none;
    box-shadow: 1px 2px 4px 1px rgba(204, 204, 204, 0.2);
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

.sidebar-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: black;
}

请帮忙。

Answer 1

点击主内容时使用下面的代码关闭侧边栏

 $(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
       $('#maincontent').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = true;
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      $('#maincontent').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });

    var iframeDoc = $('#iframe1').contents().get(0);
    $(iframeDoc).bind('click', function( event ) {
    if(!sidebarStatus)
        {
                   $('.sidebar-toggle').click();
        }
    });
});

新的小提琴更新了.... http://jsfiddle.net/8nhmU/9/

Answer 2

只需正确更改属性：

http://jsfiddle.net/8nhmU/4/小提琴更新

只需在选择器上添加, #maincontent

   $(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle , #maincontent').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
       $('#maincontent').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
      //sidebarStatus = true; if you want show-hide uncomment this
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      $('#maincontent').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });
});