Jqueryはとても便利ですし、ノンプログラマーでも使える、みたいな売りですが、やっぱり障害に当たるとそれを乗り越える知識と根性はノンプログラマーと言えど必要になってしまいます。
今回ちょっとはまってしまい、どう検索しようか困ってしまったりしたのでキーワード含めてメモしておきます。
本題の、あなたはslideDownとかslideToggleで何回も開いたり閉じたりしてしまう現象に出くわしたことはないでしょうか。
あるいはslideDownとかslideToggleで開閉が止まらない、とかの言い方でしょうか。
ぱっと思いつく解決方法はJqueryが用意してくれているstop()関数ですね。
$(".example").stop().slideToggle();
stop()関数はアニメーションさせるときには必ずと言ってもいいほどつけます。定石ともいえるでしょう。
しかしこんなもんを入れてもどうにもならんこともあります。
私のバカな体験談はresize()が問題でした。。
function example(){
...
$(".exampleClass").slideToggle();
...
}$(window).resize(function(){
example();
});
としてresize()関数でウィンドウサイズが変わるたびにUIも変化させてレスポンシブに対応しようとしてたわけですよ。
しかし、ボタンを押すと$(".exampleClass")がトグルで開閉してくれるはずなのに、最初の一回だけはうまくいって、その後はグィングィンと開閉しまくったあげく、動かなくなり…あえなく死亡というような結果になってました。
これは、ボタンの開閉自体がウィンドウサイズをresizeしていることになるので、slideToggleが開こうとするたびにresize関数が発火しまくりexample()が呼び出されまくってバブリングしてしまう、という自体になっていたわけです。
ではどうやって回避したもんか、ですよね。
・resize内にtoggleが絡まないようにする
か
・resize時にY方向の変化には反応しない条件分岐を作って、その中にexample()を置く
とかでしょうか。
私の場合は切り離せたので「・resize内にtoggleが絡まないようにする」で事足りましたが、そうでない場合には「resize時にY方向の変化には反応しない条件分岐」を作ってみるといいかもしれません。
「Y方向の変化には反応しない条件分岐」のサンプルコードはそこらへんに落ちているので、探してみて一番あっているものを当ててみてください。