質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3856閲覧

jquery アコーディオン 元の位置に戻る方法について

kurio

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/01/11 10:59

【解決したいこと】

「開く」のボタンがクリックされた際、「answer」のclassが付与された部分が表示されるアコーディオンを
作成したのですが、iphoneの実機で、「answer」の部分が1000px以上あるような縦に長い場合、
「閉じる」ボタンをクリックしても、元の位置に戻らないため、戻るように修正したいです。

chromeの検証で、iphoneのサイズにしてクリックすると元の位置に戻るのですが、実機のiphoneでやると
戻らず、Andoroidなどは戻るため端末によっても違いが見られます。

該当のソースコードは下記です。
js内の$("html,body").animate({scrollTop:$answer2.offset().top},"fast","swing");
の部分で、戻る動作を追加したのですが、元の位置に戻らないため
、修正箇所についてご教授いただきたいです。お願いいたします。

HTML

1<div class="inner"> 2 <div class="question action"> 3 XXXXXXXXXXXXXX 4 </div> 5 <div class="access_box_btn action"> 6 <p class="btn_brown_down">開く</p> 7 </div> 8 <div class="answer"> 9 <div class="access_guide"> 10XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11 </div> 12 </div> 13</div>

javascript

1$(function () { 2 3$(".action").on("click", function (e) { 4 var $answer = $(this).parent('.inner'); 5 var $answer2 = $answer.find('.answer'); 6 e.preventDefault(); 7 if (!$answer2.hasClass("active")) { 8 $answer.find('.btn_brown_down').text('閉じる'); 9 $answer.addClass("open"); 10 $answer2.addClass("active"); 11 $("html,body").animate({scrollTop:$answer2.offset().top},"fast","swing"); 12 } else { 13 $answer.find('.btn_brown_down').text('開く'); 14 $answer.removeClass("open"); 15 $answer2.removeClass("active"); 16 } 17 }); 18 19 });

css

1.answer { 2 opacity: 0; 3} 4 5.answer.active { 6 opacity: 1; 7} 8

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

iphone8plusで実機確認しましたが、正常動作しました。

javascriptが動いてないのでは?

「設定」➡「safari」➡「詳細」➡「JavaScriptをON」

一度確認してみてはどうでしょうか?

あとよくわからなかったのが、

iphoneの実機で、「answer」の部分が1000px以上あるような縦に長い場合、

「閉じる」ボタンをクリックしても、元の位置に戻らないため、戻るように修正したいです。

iphoneで縦1000pxもあるのか疑問でした。ipadとかですか?

投稿2020/01/12 04:17

編集2020/01/12 04:22
KazuSaka

総合スコア640

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kurio

2020/01/12 04:26

実機でご確認いただきありがとうございます! 動いているのですね。私の端末はiphone6sなのですが 設定を見るとjavascriptはオンになっていたため 端末の種類にもよるのかもしれません。 こちらでもiphone6s以外でも確認して見たいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問