1

我有一个带有左侧面板、一个主面板（在中心）和一个右侧面板的页面。左右面板我都希望能够移开（从而使主面板更大）。我在我的侧面板中添加了一个 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);
  });
4

1 回答 1

0

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

即使 div 是相对的，更改左/右 div 的“左”或“右”属性似乎也不会影响 main。相反，我不得不更改左/右边距值。所以上面的点击功能，我改成这样（left = 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);
于 2013-03-11T07:37:03.280 回答