1

サムネイル画像をクリックするとスライドダウンする myDiv という css クラスがあります。

#myDiv
{
  height:800px;
  margin:0 auto;
  width:100%:
}

ユーザーがサムネイル画像をクリックすると、myDiv高さ 800 ピクセルで表示されます。myDivたとえば、サムネイル 1 をクリックすると高さがmyDiv700px になり、サムネイル 2 が高さ 200px になるなど、高さが異なる複数のサムネイル画像があるため、jQuery を使用して動的に高さを計算する方法はありますか?

私はこの言語に堪能ではないので、シナリオを説明することしかできないので、ここに...

jQuery: 1. クリック 1: サムネイル 1 をクリックすると、myDivクラスの高さ = 700px を取得し、下にスライドします 2. クリック 2: サムネイル 2 をクリックすると、前のクラス (700px) と現在のクラス (200px) の高さを取得し、から減算しますお互いにスライドの上下の値を決定します (700px - 200px = 500px)。

myDiv対応する高さまで上下にスライドするよう に、以前と現在の高さを計算する方法はありますか?

よろしくお願いいたします。

編集: CSS と jQuery

#box
{
max-width:1140px;
margin: 0 auto;
display: inline-block;

}

html[xmlns] #portfoliocontainer {
display: block;
}

* html #portfoliocontainer {
height: 1%;
}

#portfoliocontainer:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}

そしてjQueryは次のとおりです。

$('#box').hide();
$('#myDiv').hide();
$('.portfolio-area').click(function(){
$('#myDiv').hide();

$('#box').slideDown('slow');
$('#myDiv').fadeTo('slow',1);

});
4

1 に答える 1

1

必要なのはクリアフィックスだと思います。#portfolio div conainer を clearfix し、定義された高さを削除すると、すべて問題ありません

http://www.webtoolkit.info/css-clearfix.html

li のポートフォリオ div の内部はフローティングであるため、div は clearfix が修正する高さを取得できず、高さは定義せずに動的になります。

簡単なテストでは、これを追加し、高さの追加部分を削除します

#portfoliocontainer:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

clearfix クラスを作成し、それをその ID に追加する必要があります

于 2012-07-31T19:17:32.230 に答える