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を消したら動きました。

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

関連記事

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月をもってBracketsサポート終了です。確かにAdobeとしては、Bracket...

number

【Javascript・JQuery】カウントアップを複数動かしながら画面内でスタートさせるためには

「カウントアップ」 数字がくるくるして表示されるアレです。 プラグイン入れてちょちょいとやってしまえばいいやー!と思っていましたが意外と遠回りしました。 スクロ...

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

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

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

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...