0

slideToggleJQuery でエフェクトを作成しようとしています。次のように配置された div があります。

someDiv {
   position : absolute;
   bottom : 100px; 
}

クリック時に関数 ( $("#someDiv").slideToggle();) がトリガーされるdivと、表示またはドロップダウンではなく、下から上にスライドします。

上記の位置でTOPから普通にドロップするようにしたいです。それ、どうやったら出来るの？下から配置するとその効果が得られると読みましたが、どこにも解決策が見つかりませんでした。

どんな助けでも本当に感謝しています。

4

2 に答える 2

2

関数を window イベントと組み合わせて使用​​し、CSSプロパティresizeを使用して div を下から 100px の位置に動的に配置し、が次のように希望どおりに動作するようにすることができます。topslideToggle()

CSS

#theDiv {
  position : absolute;
}​

HTML

<button>Toggle</button>
<div id="theDiv">...<div>​

JS

// Positions Div From Bottom //
function positionDiv($target, fromBottom){
    $target.css({
        top: $(window).height() - fromBottom
    });
}

// Bind positionDiv() to Window Resize and Trigger at Start //
$(window).resize(function(){
    positionDiv($('#theDiv'), 100);
}).trigger('resize');

// Bind Toggle to Button //
$('button').on('click', function(){
    $('#theDiv').slideToggle();
});​

デモはこちら

これが役立つことを願っています！

于 2012-07-21T15:15:55.407 に答える
0

これはどうですか？ http://jsfiddle.net/fZGGG/6/

于 2012-07-21T15:17:07.740 に答える