Question

我有一个左侧面板，一个主要（在中间）和一个右侧的页面。左边和右边的面板我希望能够移开（从而使主要更大）。我在侧面板上添加了一个jQuery动画，但主要是静止不动，我无法弄清楚为什么当其他div移开时它不会变大。

HTML

  <aside id="_left" class="left collapsible">
    <div id="left_ExpanderCollapse"><span>&lt;</span></div>
    <div style="clear: both"></div>
    <table cellpadding="0", cellspacing="0">
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
    </table>
    test 2
  </aside>

  <aside id="_right" class="right collapsible">
    <div id="right_ExpanderCollapse"><span>&gt;</span></div>
    <div style="clear: both"></div>
    <table cellpadding="0", cellspacing="0">
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
    </table>
    test 2
  </aside> 

  <div id="_main" >
    <h1>Title</h1>
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p><p>text</p>    
    <div id="pushFooter"></div>
  </div>

<footer>
  Here is some small footer text
</footer>

CSS

* { 
  margin: 0; 
}
html, body {
  height: 100%;
}

.wrapper {
  width: 80%;
  min-height: 98%;
  border: 1px solid #000;
  padding: 0.5em;
  margin: 0 auto -5em; /* -5em being the size of the footer */
}
footer, #pushFooter {
  height: 5em;
}
footer {
  border: 1px solid #ff0000;
  font-size: 0.7em;
  margin: 0 auto;
}

#_main {
  background-color: #999;
}

aside.left {
  float: left;
  background-color: #eee;
  display: inline-block;
  border: 1px solid #0000ff;
}
aside.right {
  float: right;
  background-color: #eee;
  display: inline-block;
  border: 1px solid #0000ff;
}
#_left, #_right{
  min-width: 15em;
}
#_left_ExpanderCollapse {
  width: 20px;
  margin-right: 5px;
}
#_right_expanderCollapse {
  width: 20px;
  margin-left: 5px;
}

#left_ExpanderCollapse, #right_ExpanderCollapse {
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  width: 20px;

  background-color: #0492d0;
  /* round box */
  -moz-border-radius: 75px;
  -webkit-border-radius: 75px;
  border-radius: 75px;
}
.collapsible {
  position: relative;
}

JS / jQuery

  // make the aside containers as high as the main container
  $("aside").each(function() {
    if($("#_main").height() < $("div.wrapper").height())
      $("#_main").height($("div.wrapper").height());
    $(this).height($("#_main").height());
  });
  // make the footer(s) as wide as the main container
  $("footer").each(function() {
    $(this).width($("#_main").width());
  });
  // make left resizeable
  $( "#_left" ).resizable({handles: 'e, w'});

  $("#left_ExpanderCollapse").click(function() { //alert($(this).text());
    if($(this).text() == "<") {
      var fold     = "-";
      var newArrow = ">"; 
      $("#_left").animate( { left:    fold+'='+($("#_left").width()-$(this).width()),
                            opacity: "0" }, 1000 );
    }
    else {
      var fold     = "+";
      var newArrow = "<";
      $("#_left").animate( { opacity: "1",
                            left:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
    }
    $(this).text(newArrow);
  });

Answer 1

如果有人需要这个，我自己发现了：

更改左/右div的“left”或“right”属性似乎并不影响main，即使div是相对的。相反，我不得不改变左/右边距值。所以上面的点击功能，我改变了这样（左= marginLeft ）：

if($(this).text() == "<") {
  var fold     = "-";
  var newArrow = ">"; 
  $("#_left").animate( { marginLeft:    fold+'='+($("#_left").width()-$(this).width()),
                        opacity: "0" }, 1000 );
}
else {
  var fold     = "+";
  var newArrow = "<";
  $("#_left").animate( { opacity: "1",
                         marginLeft:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
}
$(this).text(newArrow);

jQuery animate left不会影响其他div

1 个答案: