前提・実現したいこと
シンプルなHTMLコーディングによるサイトを制作しています。
https://liginc.co.jp/web/js/jquery/34048
↑このページを参考にしてアコーディオンを実装したのですが、開閉がうまくいかない(全部開ききらない)ようで、原因を究明しています。
現象としては、
●FireFoxやChromeでは開く動作が途中で止まるのに、IEだと全部開く
●稀に全部開く時もあるが、途中で止まる時が多い
●1つのhtml内に複数のアコーディオンを入れている(構造が同じ)が、全てのアコーディオンが開ききらないわけではない
以上を確認しています。
なお、ブラウザキャッシュはクリアして動作を確認しています。
コードの記述は以下の通りです。
html
1 <div class="dtl-wrap"> 2 <div class="dtl"> 3 <p class="dtl-trigger dtl_more"></p> 4 <div class="dtl-item"> 5 <p>テキストが入ります。テキストが入ります。テキストが入ります。</p> 6 </div> 7 </div> 8 </div>
css
1.dtl-wrap {position: relative;} 2.dtl-wrap + .dtl-wrap {margin-top: 40px;} 3 4.dtl-trigger { 5 cursor:pointer; 6 display: block; 7 position: absolute; 8 width: 10%; 9 text-align: center; 10 top:0; 11 right:0; 12 height: 22px; 13 border: 1px solid #000; 14 padding: 0.5% 2%; 15 color:#000; 16 -webkit-transition: all 0.3s ease; 17 -moz-transition: all 0.3s ease; 18 -o-transition: all 0.3s ease; 19 transition: all 0.3s ease; 20} 21.dtl-trigger:hover {background-color: #fff;color:#000;opacity:1;} 22.dtl-trigger::after {content: "続きを読む";} 23 24.dtl-item {position: relative;overflow: hidden;} 25.dtl-item.is-hide {height: 80px;} 26.dtl-item::before { 27 display: block; 28 position: absolute; 29 bottom: 0; 30 left: 0; 31 content: ""; 32 width: 100%; 33 height: 40px; 34 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%); 35 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%); 36 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%); 37 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%); 38} 39.dtl-trigger.is-show {bottom: -2em;background:#000;color:#FFF;} 40.dtl-trigger.is-show::after {content: "閉じる";} 41.dtl-trigger.is-show + .dtl-item::before {display: none;}
js
1 <script> 2 var itemHeights = []; 3 var returnHeight; 4 $(function(){ 5 $(".dtl-item").each(function(){ 6 var thisHeight = $(this).height(); 7 itemHeights.push(thisHeight); 8 $(this).addClass("is-hide"); 9 returnHeight = $(this).height(); 10 }); 11 }); 12 $(".dtl-trigger").click(function(){ 13 if(!$(this).hasClass("is-show")) { 14 var index = $(this).index(".dtl-trigger"); 15 var addHeight = itemHeights[index]; 16 $(this).addClass("is-show").next().animate({height: addHeight},500).removeClass("is-hide"); 17 } else { 18 $(this).removeClass("is-show").next().animate({height: returnHeight},500).addClass("is-hide"); 19 } 20 }); 21 </script>
考えられる原因に心当たりがある方、解決策をご教示いただけますと幸いです。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー