WEBTEQWEBTEQWEB制作・技術・解説メニューコンテンツへ移動ホームスポンサーリンクJqueryのslideDownとかslideToggleでグィングィン何回も開いたり閉じたりしてしまう現象Jqueryはとても便利ですし、ノンプログラマーでも使える、みたいな売りですが、やっぱり障害に当たるとそれを乗り越える知識と根性はノンプログラマーと言えど必要になってしまいます。今回ちょっとはまってしまい、どう検索しようか困ってしまったりしたのでキーワード含めてメモしておきます。本題の、あなたはslideDownとかslideToggleで何回も開いたり閉じたりしてしまう現象に出くわしたことはないでしょうか。slideDownとかslideToggleで開閉が止まらない、とかの言い方でしょうか。思いつく解決方法はJqueryが用意してくれているstop()関数ですね。$(".example").stop().slideToggle();stop()関数はアニメーションさせるときには必ずと言ってもいいほどつけます。定石ともいえるでしょう。こんなもんを入れてもどうにもならんこともあります。私のバカな体験談はresize()が問題でした。example(){...$(".exampleClass").slideToggle();...}$(window).resize(function(){example();});としてresize()関数でウィンドウサイズが変わるたびにUIも変化させてレスポンシブに対応しようとしてたわけですよ。ボタンを押すと$(".exampleClass")がトグルで開閉してくれるはずなのに、最初の一回だけはうまくいって、その後はグィングィンと開閉しまくったあげく、動かなくなり...あえなく死亡というような結果になってました。これは、ボタンの開閉自体がウィンドウサイズをresizeしていることになるので、slideToggleが開こうとするたびにresize関数が発火しまくりexample()が呼び出されまくってバブリングしてしまう、という自体になっていたわけです。やって回避したもんか、ですよね。・resize内にtoggleが絡まないようにするか・resize時にY方向の変化には反応しない条件分岐を作って、その中にexample()を置くとかでしょうか。私の場合は切り離せたので「・resize内にtoggleが絡まないようにする」で事足りましたが、そうでない場合には「resize時にY方向の変化には反応しない条件分岐」を作ってみるといいかもしれません。「Y方向の変化には反応しない条件分岐」のサンプルコードはそこらへんに落ちているので、探してみて一番あっているものを当ててみてください。2件の返信スポンサーリンク▼この記事には関連リンクページがあります。https://www.youtube.com」でSafari,Chrome,Firefoxでエラー続出Androidでinputが入っている要素をappendしたとき入力できなくなる件を回避iPhone(iOS)のブラウザで、iframeの中でスクロールアニメーションが動かない!とき。android2.3で戻ってしまう現象を解決。Jqueryプラグインで、スライダーやなんかと干渉するとき。横持ち、縦持ち(オリエンテーション)を取得して、やり直しが必要なjavascriptを実行するためのjavascriptflexsliderの使い方(デモ)とオプションの日本語訳。PM今アコーディオンメニューで苦戦しています。PCではslideToggleは上手く行くんですが、スマホだとなぜか開閉を繰り返ししまいます。お手数ですが、解決策を教えて頂けませんか?よろしくお願いします。PMずいぶんと遅れちゃってすみません。コメントいただいていたことに今気が付きました。touchstart’がダブルで効いちゃっているんじゃないですかね?‘click’か’touchstart’だけにするとか。ul”があるわけじゃないですよね?参考になれば。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。操作の結果できるパーティションはアライメントが正しくないためにパフォーマンスがでません。二日酔いでそんな気になれない!Windows10どうしても消えないディレクトリ名・ファイル名を削除するブロック要素とブロック要素同士をfloatとoverflowで回り込みフロートができるなんて...CSSネタUBUNTUにfail2banを導入したが、fail2banの起動でエラーが出てしまう。固定ページでループが含まれているときに、固定ページ自体のIDを取得したいとき。'さくらサーバーのhtaccessによるリダイレクトでループを防ぐ書き方。httpからhttpsにリダイレクトなんか特に。それはルーターのせいだった。自サイトにあるWordPressをfile_get_contentsで引き込みたいときPhotoshopで「不明なJPEGマーカー」とエラーが出てしまう件PEARのamazonAPIから商品一覧を取得できるServices/Amazon.php。