0

mootoolsを使用したドロップダウンメニューのあるhtml5ページがあります。hidden（）関数とshow（）関数を使用すると機能します。しかし、私は次のようにメニューをスライドインおよびスライドアウトしたいと思います。

var m        = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");

if (e.hasClass('active')) {

    m.hide();
    e.removeClass('active');

} else {

    m.show();
    e.addClass('active');
}

非表示にして表示する代わりに、slideInとslideOutが必要です。

var m    = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {

    m.slideOut();
    e.removeClass('active');

} else {

    m.slideIn();
    e.addClass('active');
}

実例： http： //jsfiddle.net/wzzeZ/

動作しない：http：//jsfiddle.net/37V53/1/

エラーをスローしていません。どこで修正できますか？

4

1 に答える 1

1

ここでいくつかのことが起こっています。

まず第一に、何もエラーがないため、エラーは表示されません。コードに console.log() 呼び出しを散らかすと、それらはすべて実行されます。

メニューが表示されないのはスタイルの問題です。

FX.SlideMootoolsのクラスは、スライド先の要素の 'display' プロパティを明示的に設定していないようですblock。それを機能させるには、まだ呼び出す必要があります.show()。

次に、 のドキュメントをFX.Slide確認すると、スライド効果を実行するためのラッパー要素が作成されていることがわかります (コンテナーは、高さのアニメーション、オーバーフロー: 非表示などに必要です)。

残念ながら、それはメニューの配置を混乱させているようです。これは、それを含む要素に対して相対的に配置されています - しかし、含む要素には高さとオーバーフローがあります: メニューを非表示にする非表示のスタイル (言うまでもなく、たとえあなたがそれを見ることができたとしても、適切な場所にあります）。

私が話していることを確認するには、この更新された Fiddle をチェックしてください: http://jsfiddle.net/37V53/2/

Firebug を使用して Firefox で実行し、コンソールに記録されている要素の上にカーソルを置くと、要素が実際に表示されている場所 (ウィンドウの中央) に Firebug の青いハイライトが表示され、ビューから隠されていることがわかります。 .

これは、相互に作用している MooTools クラスで行われた仮定の組み合わせです。FX.Tweenではなく、独自の (単純な) スライドアウト スクリプトを作成する方がよいでしょうFX.Slide。

元の Fiddle (動作する) に基づいてこれを行う方法のサンプルを作成しました - http://jsfiddle.net/LkLgk/

トリックは、ユーザーではなくブラウザーに要素を表示することです ( のvisibility: hidden前display: blockに設定し、高さを取得し、 に設定heightし1px、 にvisibility戻しvisible、高さを以前に検出された値にトゥイーンします。

それがあなたを正しい方向に向けることを願っています。疑わしいときは、console.logすべてを覚えておいてください！

于 2012-12-03T15:47:43.083 に答える