jQueryでのhoverメソッドとtoggleメソッドの使い方

jQueryはフロントエンド開発で広く使われており、知識がたくさんあるので、jQueryのhoverメソッドとtoggleメソッドの使い方を、こんな方に向けてお伝えします。 jQueryを学んでいる方、ぜひ覗いてみてください。

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

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 function

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 スタイルを追加することもできます:

Theコードは次のとおりです。

<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 の一般的なホバー イベントとトグル イベントについて新たに理解できましたか? この記事が役立つことを願っています。

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