jquery toggleイベント

TOPページに戻る > jquery入門

スポンサード リンク

jquery toggle()イベント

toggleイベントは、セレクタで指定した要素をクリックすると交互に処理を実行するメソッドです
複数の処理を指定できます。何個でも処理できます。最後の処理が終わると最初の処理に戻ります

この場合は、処理1と処理2のfunctionを交互に実行します

$("セレクタ").toggle(処理1,処理2);

引数に複数のfunctionを指定できます。処理1から順に処理します

$("セレクタ").toggle(処理1,処理2,処理3,処理4,処理5);

実際の使い方

$("セレクタ").toggle(
        function() {
         処理1
        },
        function() {
         処理2
        },
        function() {
         処理3
        }
);

指定したHTML要素の表示を交互に切り替える

ボタンをクリックすると枠線の表示を交互に切り替えます

jquery

$(function() {
    $("button").toggle(
        function() {
            $("#hoge")
                .css( "border","3px solid red" );
        },
        function() {
            $("#hoge")
                .css( "border","3px solid blue" );
        });
});
css
#hoge{
    padding: 20px;
    border: 3px solid blue;
 }

html

<button>ボタン</button>
<div id="hoge">#hoge</div>

サンプル

#hoge






(C)2012 ホームページ作成無料