doors doors

便利だけど……穴がある

  • HOME
  • MEMO
  • 【jQuery】slidetoggleの落とし穴

【jQuery】slidetoggleの落とし穴

アコーディオンナビが作りやすい、jQueryのslidetoggle。
設定するだけでcssなどのアニメーションをつけなくても自動で動いてくれます。

クリックしてみてください
まさにここ、slidetoggleでできてます。

しかし過去の私はこれを初めて使ったときに、
どうしても動かなかったことがあります。

原因はcssとのバッティング

jsよりもcssが得意だった私は、初めはcssだけで済まそうとしていました。
がしかしjsのonclickを探していると……便利そうなslidetoggleに出会ったのです。

$(function () {		
	$('.catitem h2 span').click(function () {	
		$(this).parent().next('ul').slideToggle(200);
		$(this).parents('.catitem').toggleClass('active');
	});	
});

しかし効かない……なぜ?合っているはずなのに!

原因はcssにありました。
上記は要素「catitem」を出したり引っ込ませたりさせたかったわけですが、
そのcatitemに元々cssにつけていたtransitionなどの設定があったのです。
このtransitionを消したら動きました。

単なるバッティング!!!

関連記事

chart.js

chart.jsでアニメーションするグラフを作ってみた

グラフ画像をただ置いておいても、円グラフはただの丸、棒グラフもただの棒の並びのように見えてしまい、なかなか注目されないものです。 そこでグラフを動かすchart...

【parallax】IEでも綺麗に動くパララックスを探してみた(追記あり)

スクロールすると背景が止まって見えたり、要素が動くパララックス。パララックスのライブラリはいくつか存在しますが、IEのために見直すことにしました。 IEでカクつ...

【javascript】three.jsを触ってみた

three.jsでweb上でも3Dを動かせるようにしてみました。 ペットボトルの3Dはiidaさん作です。 以下の画像をクリックして3Dページへ飛び、マウスホイ...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。東京・名古屋近郊の打合せもご相談ください。

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...