cashaan
アコーディオンナビが作りやすい、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を消したら動きました。
単なるバッティング！！！
