0

summary_box次のようにスライドするように、divをアニメーション化するにはJqueryコードが必要です。

読み込み時にブラウザ ウィンドウに表示され、summary_button2div をクリックすると右にスライド (幅を 0 に変更) し、ボタンをもう一度クリックすると絶望して再び表示されます。私はある種の作品を持っていますが、これが何をしているのかわかりません: (== 300 ? "0" : "300px";)???

<script type="text/javascript">
$(document).ready( function(){
    $('#summary_button2').click( function() {
        var toggleWidth = $("#summary_box").width() == 300 ? "0" : "300px";
        $('#summary_box').animate({ width: toggleWidth });
    });
});
</script>
4

5 に答える 5

4

これは三項演算子であり、基本的には if / else ステートメントを短縮したものです。

if ( $("#summary_box").width() == 300 ) {
   var toggleWidth = '0';
}else{
   var toggleWidth = '300px';
}

補足として、jQueryanimate()には同じことを行うトグル オプションがあります。

$('#summary_box').animate({ width: 'toggle'}, 1000);

フィドル

于 2013-06-21T16:59:05.380 に答える
3

それは三項演算です - これに相当します -

var toggleWidth;
if ($("#summary_box").width() == 300) {
    toggleWidth = "0";
} else {
    toggleWidth "300px";
}

MDN リファレンス

于 2013-06-21T16:59:09.513 に答える
2

このコードは次のようになります。

$("#summary_box").width() == 300 ? "0" : "300px";

width() が 300 の場合は 0 を返し、それ以外の場合は "300px" を返します。

詳細については、三項演算子を参照してください。

于 2013-06-21T17:00:11.423 に答える
1

StackOverflow でこの質問を確認してください。

あなたの試みに同様の解決策を提供します。

このフィドルもチェックしてください。

JS:

$(document).ready( function(){
    $('#toggle-button').click( function() {
        var toggleWidth = $("#toggle").width() == 300 ? "0" : "300px";
        $('#toggle').animate({ width: toggleWidth });
    });
});
于 2013-06-21T16:58:47.020 に答える
0

私はこれを試しましたが、うまくいきます

$("#searchIcon").click(function(){
    var toggleWidth = "0px";
    if($("#searchbox").width() == 118)
    {
        toggleWidth="0px";
    }
    else
    {
        toggleWidth="120px";
    }
    $('#searchbox').animate({ width: toggleWidth });
});
于 2014-12-23T23:05:44.373 に答える