jQueryのtoggleとhoverの使い方を詳しく解説

この記事では、jQuery の 2 つの関数 hover と toggle の使用方法と例を紹介することに重点を置いています。非常にシンプルで実用的であり、友人に参考にすることをお勧めします。

jQuery は、マウスオーバー、マウスアウト、キーアップ、キーダウンなどの 2 つのイベント効果を結合するいくつかのメソッド (toggle など) を提供します。

1. hover(over,out)シミュレートされたホバー イベントを停止するメソッド (マウスを
オブジェクト

の上に移動し、オブジェクトの外に移動する)。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。

パラメータ: over (関数): マウスが要素上に移動したときにトリガーされる関数。 out (関数): マウスが要素の外に移動したときにトリガーされる関数。

<script type="text/
javascript
">
$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();// 鼠标悬浮时触发
    },function(){
        $(this).next().hide();// 鼠标离开时触发
    })
})
</script>

2. toggle関数

toggle(fn,fn)はクリックする毎に呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。 unbind("click") を使用して

削除

を行うことができます。

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show();// 第一次点击时触发
    },function(){
        $(this).next().hide();// 第二次点击时触发，之后不停的切换
    })
})
</script>

toggle() メソッドは、要素の表示状態を切り替えます。 選択した要素が表示されている場合は、これらの要素を非表示にします。選択した要素が非表示になっている場合は、これらの要素を表示します。 toggle() メソッドは、要素の表示状態を切り替えます。

選択した要素が表示されている場合は、これらの要素を非表示にします。選択した要素が非表示になっている場合は、これらの要素を表示します。

したがって、上記のコードは次のように書くこともできます:

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().toggle();
    },function(){
         $(this).next().toggle();
    })
})
/*$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().toggle();
    })
})*/
</script>

CSS スタイルを追加することもできます:

<style type="text/css">
.highlight{ 
background
:#FF3300; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){//配合css样式使用
        $(this).addClass("highlight");
        $(this).next().show();
    },function(){
        $(this).removeClass("highlight");
        $(this).next().hide();
    });
})
</script>

以上がjQueryのtoggleとhoverの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。