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

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

関連記事

number

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

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

aspect

要素のアスペクト比(縦横比)を維持する方法

CSSにおいて、画面いっぱいの中の要素のアスペクト比(縦横比)を維持する方法を書き留めておきます。 単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に...

wordpress01

サイト構築でCMSをオススメする理由

WEBサイトの管理、どうしていますか? 今やどの企業でさえもWEBサイトを持っているのが当たり前の時代になっています。 しかしWEBサイトを作っただけで満足する...

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

昔の携帯電話

レトロへのこだわりと現実との境界について

1つ前の記事で触れていた「ガチなバック・トゥ・ザ・フューチャーファン」とは僕のこ...

レモネードが好きすぎる‥vol.1

突然の告白みたいになってますが、レモネードが好きです。最近のブームによる影響はか...

AfterEffectsでボーリングやってみよう

最近無性にボーリングがやりたくなる自分です。昔のようにパワーがないので、行く人に...

犬と歩けばネタにぶつかる。。かも?

すっかり色付いてキレイ! と、見とれつつも情緒なく銀杏トラップにかからぬよう、つ...