Question

你好我在节目动画中遇到问题并隐藏div特别宽度。 maincontent div应该占据所有100％的宽度，当侧边栏显示它正确时。当侧边栏关闭maincontent回到100％宽度。当我点击maincontent div时如何关闭侧边栏？

脚本

$(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

使用下面的代码在您单击maincontent时关闭侧栏

 $(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;
    }
  });
});

隐藏/切换div动画无法正常工作＆amp;单击侧栏外侧时关闭

2 个答案: