1

海

我对 jQuery 很陌生，我无法解决这个问题：

我有一个#content容器，里面有 2 个信息框。当点击信息按钮时，它们变得可见（通过切换 jQuery 功能）。

我的问题是， 的大小#content不会“调整大小”，我的意思是，它不会变大，所以信息框与下一个容器重叠。

我该如何预防？是否有根据内容的可见性调整容器大小的功能？

编辑：

抱歉不准确，代码如下：

  <div id="content">
. . .

<script type="text/javascript">
$(function(){
  $('#info_icon').on('click mouseover',(function(){
     $('#info_text').toggle("slow");
  }));
});
</script>

<script type="text/javascript">
$(function(){
  $('#project_icon').on('click mouseover',(function(){
     $('#project_text').toggle("slow");
  }));
});
</script>

  <div id="info_text" style="display:none;">
...
  </div>


  <div id="project_text" style="display: none;">  
...
  </div>
  </div>

#content {
    background-color: #b12a28;
    padding-left: 10%;
    padding-top: 3%;
    height: auto;
}


#info_text {
    background-color: #FFF;
    opacity: 0.8;
    float: left;
    height: 40%;
    width: 25%;
    padding: 10px;
    margin-right: 3%;
    margin-bottom: 10%;
}


#project_text {
    background-color: #FFF;
    opacity: 0.8;
    float: left;
    height: 40%;
    width: 25%;
    padding: 10px;
    clear: none;
}
4

3 回答 3

0

第一个猜测是有一种方法可以解决这个问题，而不是使用 jQuery/javascript，而是使用 CSS，但是您的用例的细节没有说明，所以很难说。

至于用javascript做，也许这个元代码会有所帮助

1) Detect KeyStroke event or #content on change
2) Get the size of the various containers your are employing (e.g. $("#content").width(),height, etc)
3) Resize the #content container such that it accommodates both boxes

祝你好运！

于 2012-11-23T16:48:58.620 回答
0

你有没有在css中给容器一个固定的大小？

于 2012-11-23T16:49:11.720 回答
0

这听起来像是一个不需要 javascript 来修复的 CSS 问题。您可以发布链接、代码或 jsfiddle 吗？

于 2012-11-23T17:14:44.443 回答