Blog

HOME > Web > JQuery > 【jQuery】toggleメニューでプルダウンメニューの繰り返しを防ぐ方法

【jQuery】toggleメニューでプルダウンメニューの繰り返しを防ぐ方法

2015/11/08

JQuery

表題だと分かりにくいかもしれませんが、toggleメニューでオンマウスをすると
プルダウンメニューが繰り返し表示されてしまうことがあったので、
防ぐ方法について備忘録として残します。

参考サイト
jQueryのhoverイベントで 狂ったようにアニメーションするのを止める方法

最初のコード

$(function() {
  $("#main_nav .dropdown_item").hover(function(){
      $(this).children("ul").slideToggle();
  });
});

これだとマウスオーバーでなぜかプルダウンメニューが何回も繰り返し表示されてしまうため、
上記参考サイトを基に「.stop()」を使い下記のように書き換えました。

$(function() {
  $("#main_nav .dropdown_item").hover(function(){
      $(this).children("ul").stop().slideDown();
      },function(){
      $(this).children("ul").stop().slideUp();
  });
});

これで無事解決しました。

※#main_navと.dropdown_itemは任意の指定になります。cssで指定したコードに書き換えてください。



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ