jqueryで状況に応じてslideToggle、fadeInを動作させたい

Question

実現したいこと

jqueryを使い、特定のボタンをクリックした際に２種類の動作をさせたいのですが動きません。
JavaScriptに詳しい方教えて頂けないでしょうか。
よろしくお願致します。

動作1:.btnをクリックするとslideToggleが開く
動作2:ページをスクロールした時に.btnをクリックするとfadeInが開く
（ページをスクロールした時のみ別のコードで.is-movedが付与される仕組みになっています。）

発生している問題・エラーメッセージ

動作2が動きません。

該当のソースコード

<script>
window.addEventListener('DOMContentLoaded', function(){
$('.open-2').each(function(){
$(this).css("height",$(this).height()+"px");
});
$('.open-2').hide();
$('.btn').click(function () {
$('.open-2').slideToggle('slow');
$(this).toggleClass('active');
});
$('.is-moved ..btn').click(function () {
$('.open-2').fadeIn();
});
});
</script>

Answer 1

<script> $(document).ready(function() { $('.open-2').each(function() { $(this).css("height", $(this).height() + "px"); }); $('.open-2').hide(); $('.btn').click(function() { if ($('html, body').scrollTop() > 0) { $('.open-2').fadeIn(); } else { $('.open-2').slideToggle('slow'); $(this).toggleClass('active'); } }); }); </script>

修正点:

１．window.addEventListener('DOMContentLoaded', function(){を$(document).ready(function() {に変更し、jQueryでDOMが読み込まれるのを待ちます。

２．クリックイベントの中で、スクロールされたかどうかをチェックし、条件に応じて動作1と動作2を実行します。
スクロールされたかどうかのチェックには、$('html, body').scrollTop()を使用します。
スクロールされている場合、scrollTop()の値は0より大きくなります。

３．is-movedクラスの判定が不要になったため、削除しました。
この修正により、ページがスクロールされていない場合には動作1（slideToggle）が、スクロールされている場合には動作2（fadeIn）が実行されるようになります。

Comments

[cancancan]

教えて頂きありがとうございます。
教えて頂いたコードでやりたかったことはできたのですが、$(document).ready(function() {に変更するとエラーで動きませんでした。またページを読み込み直した時、動作1が一瞬表示された状態になるのですが、これも関係ございますか。調べて見たのですが理由がよくわからなく、教えてもらえないでしょうか。よろしくお願い致します。

[cancancan]

エラーは、Uncaught ReferenceError: $ is not defined でした。

[cancancan]

動作1が表示されるのはcssで対応しました。教えていただきありがとうございました。

Answer 2

11行目の"$('.is-moved ..btn') "ですが、"..btn"ではなく ".btn" と変更するとどのようになりますか？

$('.is-moved .btn').click(function () {

Comments

[cancancan]

コメントありがとうございます。ドットがひとつ多かったです。失礼しました。