コメントありがとうございます。ドットがひとつ多かったです。失礼しました。
実現したいこと
jqueryを使い、特定のボタンをクリックした際に２種類の動作をさせたいのですが動きません。
JavaScriptに詳しい方教えて頂けないでしょうか。
よろしくお願致します。
動作1:.btnをクリックするとslideToggleが開く
動作2:ページをスクロールした時に.btnをクリックするとfadeInが開く
（ページをスクロールした時のみ別のコードで.is-movedが付与される仕組みになっています。）
発生している問題・エラーメッセージ
動作2が動きません。
該当のソースコード
jquery
1<script> 2window.addEventListener('DOMContentLoaded', function(){ 3$('.open-2').each(function(){ 4$(this).css("height",$(this).height()+"px"); 5}); 6$('.open-2').hide(); 7$('.btn').click(function () { 8$('.open-2').slideToggle('slow'); 9$(this).toggleClass('active'); 10}); 11$('.is-moved ..btn').click(function () { 12$('.open-2').fadeIn(); 13}); 14}); 15</script>
回答2件
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）が実行されるようになります。
投稿2023/03/19 05:09
総合スコア230
0
11行目の"$('.is-moved ..btn') "ですが、"..btn"ではなく ".btn" と変更するとどのようになりますか？
$('.is-moved .btn').click(function () {
投稿2023/03/19 05:16
総合スコア2
回答へのコメント
あなたの回答
tips
プレビュー
関連した質問
Q&A
[php][javascript]ボタンが押されたかどうかを検証するページを作りたい
Q&A
タブの切り替え時にふわっと表示させたい。
意見交換
h1タグを非表示や透明化させるのは良くないでしょうか？
Q&A
ハンバーガーメニューの挙動について（transitionが、もとに戻る時には適応されない）
Q&A
Apps Scriptでhtmlのページを作成しているが、ラジオボタンをクリックしても選んだところのチェックが入らない現象が起きています。
Q&A
VBAでウェブサイトのテーブルの1要素をクリックする方法をご教示ください。
Q&A
Ajaxでフォームの内容をPHPに渡してPDFを作成し文字列を引き渡し、受け取った文字列をjavascriptでPDF化したい
Q&A
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/21 08:39
2023/03/21 08:47
2023/03/31 06:53