特定の例を使ってこの問題を解決してみましょう。
垂直の2レベルメニューを開発する必要があるとしましょう。 デフォルトでは、最初のレベルのポイントのみが開いており、対応するリンクをクリックすると、開いているサブレベルが最初に非表示になり、次に目的の非表示のサブレベルが開きます。 しかし、開いているだけでなく、コンテナの高さと透明度を上げてアニメーション化します。
つまり、最終的にこのメニューを取得する必要があります。
将来のメニュー用にHTMLコードを作成しています。
<a id= "1" class= "menu" > 1 </a><br/>
<div id= "magic1" class= "magic" > 2 </div>
<a id= "2" class= "menu" > 1 </a><br/>
<div id= "magic2" class= "magic" > 2<br/> 2<br/> 2 </div>
<a id= "3" class= "menu" > 1 </a><br/>
<div id= "magic3" class= "magic" > 2 </div>
Css：
div.magic{
filter : alpha(opacity=0) ;
-moz-opacity : 0 ;
-khtml-opacity : 0 ;
opacity : 0 ;
overflow : hidden ;
padding-left : 10px ;
}
そして、javascript：
$(document).ready(function(){
$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);
$( "div#magic" + this .id).animate({
opacity: 1,
height: "auto"
}, 500);
}
);
})
メニュー項目をクリックすると、「マジック」クラスのすべてのブロックが非表示になり、必要な項目を含むブロックが開きます。
すべてが機能するように思えますが、まったくそうではありません。 Firefox、Google Chrome、およびOperaは、「auto」高さプロパティの値の代わりに、cssで登録したコンテナの高さを10pxに設定し、IE7はエラーを生成します：無効な引数
これに対処する方法は？
方法1
アイデアは、メニューを操作する前に、まず必要なすべてのコンテナの高さを配列に書き留めてから、「auto」の代わりにこの配列の要素の値を置き換えることです。 つまり、新しいjavascriptコードは次のようになります。
$(document).ready(function(){
var height_element= new Array();
var array_length=$( "div.magic" ).length;
for (i=1;i<=array_length;i++)
{
height_element[i]=$( "div#magic" +i).height();
}
$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);
$( "div#magic" + this .id).animate({
opacity: 1,
height: height_element[ this .id]+ 'px'
}, 500);
}
);
})
したがって、「auto」に等しい設定された高さの値の使用を取り除き、特定の数値に置き換えます。 これはIEのエラーを取り除くのに役立ちますが、判明したように、すべてのブラウザーが新しい値として10pxを設定し続けるため、コンテナーの高さの真の値に関する問題は解決しません。 つまり、画面に次のように表示されます。
この問題に対処するために、マジッククラスのプロパティから高さの値を削除し、真の高さの値を配列に書き込んだ後に動的に設定します。
新しいcssファイルは次のようになります。
div.magic{
filter : alpha(opacity=0) ;
-moz-opacity : 0 ;
-khtml-opacity : 0 ;
opacity : 0 ;
padding-left : 10px ;
overflow : hidden ;
}
そして、このようなjavascript：
$(document).ready(function(){
var height_element= new Array();
var array_length=$( "div.magic" ).length;
for (i=1;i<=array_length;i++)
{
height_element[i]=$( "div#magic" +i).height();
}
$( "div.magic" ).css( "height" , "10px" );
$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);
$( "div#magic" + this .id).animate({
opacity: 1,
height: height_element[ this .id]+”px”
}, 500);
}
);
})
さて、完全な幸福のために、ページをロードした後に0になり、メニュー項目を最初にクリックした後に値1になる特定の変数「first」を追加できます。 すべてのサブレベルが非表示になっているときに、開いているメニューサブレベルを非表示にするための500ミリ秒の遅延を取り除くために必要です。
実際の例はこちらにあります。
方法2
animate（）メソッドの代わりに、同じ500ミリ秒の期間でhide（）およびshow（）メソッドを使用します。
ただし、hide（）およびshow（）メソッドを使用すると、すべてのオブジェクトスタイルがスムーズに変更されます。つまり、必要なパディングも0から10に、またはその逆に変更されます。 効果はもちろん美しいですが、この場合は必要ありません。 したがって、パディングは別のコンテナに入れる必要があります。
この場合のHTML：
<a id= "1" class = "menu" > 1</a><br/>
<div id= "magic1" class = "magic" ><div class = "inner" > 2</div></div>
<a id= "2" class = "menu" > 1</a><br/>
<div id= "magic2" class = "magic" ><div class = "inner" > 2<br/> 2<br/> 2</div></div>
<a id= "3" class = "menu" > 1</a><br/>
<div id= "magic3" class = "magic" ><div class = "inner" > 2</div></div>
CSS：
div.magic{
overflow:hidden;
display:none;
}
a.menu{
cursor:pointer;
color:#0033CC;
text-decoration:underline;
margin-bottom:10px;
}
div.inner{
padding-left:10px;
}
そして、javascript：
$(document).ready(function(){
var first=0;
var last_id=0;
var id_now=0;
$( "a.menu" ).click(
function(){
id_now= this .id;
if (first!=0)
{
$( "div#magic" + last_id).hide(500,function(){
$( "div#magic" + id_now).show(500);
});
}
else
{
first=1;
$( "div#magic" + this .id).show(500);
}
last_id=id_now;
}
);
})
* This source code was highlighted with Source Code Highlighter .
ユーザーVoenniyに2番目の方法を完成させてくれてありがとう。
実際の例はこちらにあります。
そして最後の言葉として 。 この記事は、jQueryでメニューを作成するために書かれたものではありません。そのようなメニューはたくさんあるからです。 ここでの主な目標は、2つの方法で高さの値をシミュレートする方法を示すことです：animate（）メソッドを使用する場合のautoプロパティ。 しかし、そのようなタスクはメニューを作成するときだけでなく発生する可能性があります。