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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

【jQuery】アコーディオン部分が開ききらない動作

k-katapashi
k-katapashi

総合スコア0

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

2029閲覧

投稿2019/01/24 10:12

編集2022/01/12 10:58

前提・実現したいこと

シンプルなHTMLコーディングによるサイトを制作しています。
https://liginc.co.jp/web/js/jquery/34048
↑このページを参考にしてアコーディオンを実装したのですが、開閉がうまくいかない(全部開ききらない)ようで、原因を究明しています。

イメージ説明

現象としては、
●FireFoxやChromeでは開く動作が途中で止まるのに、IEだと全部開く
●稀に全部開く時もあるが、途中で止まる時が多い
以上を確認しています。
なお、ブラウザキャッシュはクリアして動作を確認しています。

コードの記述は以下の通りです。

html

<div class="dtl-wrap"> <div class="dtl"> <p class="dtl-trigger dtl_more"></p> <div class="dtl-item"> <p>テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </div> </div>

css

.dtl-wrap {position: relative;} .dtl-wrap + .dtl-wrap {margin-top: 40px;} .dtl-trigger { cursor:pointer; display: block; position: absolute; width: 10%; text-align: center; top:0; right:0; height: 22px; border: 1px solid #000; padding: 0.5% 2%; color:#000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .dtl-trigger:hover {background-color: #fff;color:#000;opacity:1;} .dtl-trigger::after {content: "続きを読む";} .dtl-item {position: relative;overflow: hidden;} .dtl-item.is-hide {height: 80px;} .dtl-item::before { display: block; position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 40px; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0.9) 50%, #fff 100%); } .dtl-trigger.is-show {bottom: -2em;background:#000;color:#FFF;} .dtl-trigger.is-show::after {content: "閉じる";} .dtl-trigger.is-show + .dtl-item::before {display: none;}

js

<script> var itemHeights = []; var returnHeight; $(function(){ $(".dtl-item").each(function(){ var thisHeight = $(this).height(); itemHeights.push(thisHeight); $(this).addClass("is-hide"); returnHeight = $(this).height(); }); }); $(".dtl-trigger").click(function(){ if(!$(this).hasClass("is-show")) { var index = $(this).index(".dtl-trigger"); var addHeight = itemHeights[index]; $(this).addClass("is-show").next().animate({height: addHeight},500).removeClass("is-hide"); } else { $(this).removeClass("is-show").next().animate({height: returnHeight},500).addClass("is-hide"); } }); </script>

考えられる原因に心当たりがある方、解決策をご教示いただけますと幸いです。
宜しくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp
yambejp

2019/01/24 10:18

コピペしても異常のところまでたどりつきません codepenあたりにソースをあげられませんか?
k-katapashi
k-katapashi

2019/01/24 11:01

ご回答ありがとうございます。 codepenであげようとしたところ、jsにおいて「index.js: Unexpected token, expected } (10:14)」というエラーが出現し、あげられませんでした。
asahina1979
asahina1979

2019/01/25 00:11

一番最後のアコーディオン要素か鍵だな
k-katapashi
k-katapashi

2019/01/25 00:44

ご回答ありがとうございます。 scriptに原因がある可能性がある、ということでしょうか? たしかに、codepenでもエラーが出現していますので、可能性は高そうですね。 「index.js: Unexpected token, expected } (10:14)」の意味を解読できれば解決の糸口が見つかりそうなのですが…
yambejp
yambejp

2019/01/25 01:26

「Unexpected token, expected 」で検索するとヒットするのは React絡みが多いようですが、あくまでもjQueryで間違いないですか? またライブラリ以外のjsは外部化せずにhtml内に書き込んでみてください

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。