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

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

ただいまの
回答率

87.36%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,899

score 18

前提・実現したいこと

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

イメージ説明

現象としては、
●FireFoxやChromeでは開く動作が途中で止まるのに、IEだと全部開く
●稀に全部開く時もあるが、途中で止まる時が多い
●1つのhtml内に複数のアコーディオンを入れている(構造が同じ)が、全てのアコーディオンが開ききらないわけではない
以上を確認しています。
なお、ブラウザキャッシュはクリアして動作を確認しています。

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

    <div class="dtl-wrap">
        <div class="dtl">
            <p class="dtl-trigger dtl_more"></p>
            <div class="dtl-item">
                <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
    </div>
.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;}
    <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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2019/01/25 09:11

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

    キャンセル

  • k-katapashi

    2019/01/25 09:44

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

    キャンセル

  • yambejp

    2019/01/25 10:26

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

    キャンセル

回答 1

checkベストアンサー

+2

コードにはありませんが、画像を使っていますよね?
画像読み込み前に高さを取得しているためにずれていると思われます。
あらかじめ画像の大きさを指定しておくか、window.onload を使ってみてください。

$(window).on('load', function() {
  ...
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/29 11:37

    ご回答ありがとうございます!
    仰る通り、画像を使ったものを想定しています。
    高さ指定が難しい状況でしたので、window.onloadを使ってみたところ、正常な動作をするようになりました。

    本件、無事に解決いたしました!
    ありがとうございましたm(_ _)m

    キャンセル

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

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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