1

ハイ

私はjQueryにまったく慣れていないので、この問題を解決できません。

2つのインフォボックスが入った#contentコンテナがあります。情報ボタンをクリックすると、それらが表示されます（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 に答える