4

このコードは、上向きにトグルするか下向きにトグルするかをどのように決定しますか? 助けてください。ありがとう。

<html>
    <head>    
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function(){
                $(".flip").click(function(){
                    $(".panel").slideToggle();
                });
            });
        </script>

        <style type="text/css"> 
            div.panel,p.flip {
                margin:0px;
                padding:5px;
                text-align:center;
                background:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            div.panel {
                height:120px;
                display:none;
            }
        </style>
    </head>

    <body>
        <div class="panel">
            <p>Crap.</p>
        </div>
        <p class="flip">Show/Hide Panel</p>
    </body>
</html>
4

5 に答える 5

3

要素が表示されているかどうかを確認できます。表示されている場合は、上slideToggle()に移動します。表示されていない場合は、下に移動します。

// Want to know if it's visible?
$(this).is(":visible");

事後の方向も特定できます。

$(".panel").slideToggle("slow", function(){
  alert( "I moved " + $(this).is(":visible") ? "Down" : "Up" );
})

もちろん、これは配置された要素がないことを前提としています。

于 2012-05-18T15:03:35.960 に答える
2

要素が現在表示するように設定されている場合: なし。または他の方法で隠されています。たとえば、高さ 0。それからそれは下に滑ります、さもなければそれは上に滑ります。

現時点では、CSS に display:none; があるため、そのコードは下にスライドします。初期化。

于 2012-05-18T15:03:32.893 に答える
1

ここの jQuery サイトから直接 (http://api.jquery.com/slideToggle/)

要素が最初に表示されている場合は、非表示になります。非表示の場合は表示されます。表示プロパティは、必要に応じて保存および復元されます。要素の表示値が inline の場合、非表示にしてから表示すると、再びインラインで表示されます。アニメーションの非表示後に高さが 0 に達すると、要素がページのレイアウトに影響を与えないように、表示スタイル プロパティが none に設定されます。

お役に立てれば。

于 2012-05-18T15:04:48.317 に答える
1

jquery css 関数を利用できます。コードにいくつかの変更を加えて、ここに javaScript コードを書いています。

$(document).ready(function(){
    $(".flip").click(function(){
       if($(".panel").css("display") == 'block') {
          alert('Visible');
       } else {
          alert('Not visible');
       }
    $(".panel").slideToggle();
  });
});​

完全な作業例を参照してください

于 2012-05-18T15:08:20.327 に答える
1

切り替えられるコンテンツが表示されているかどうかをチェックします

于 2012-05-18T15:03:22.707 に答える