コンテンツスライダーのような形でbxslider を利用してコンテンツ作成をしております。
その中で、bxsliderの中にアコーディオンを設置した時の挙動で思った通りのイメージで動かないのでご相談させていただきます。
###実装したい内容といたしましては
bxsilder を使用して横に動くコンテンツの作成
コンテンツの中にアコーディオンを実装し、そのアコーディオンの伸縮とともにbxslider側の縦サイズを連動させたいです。
###現状把握している内容としては
該当コンテンツに来た時にアコーディオンを開くと動作はしますが、伸び多分の内容は隠れて表示されてしまいます。
アコーディオンが見えない状態ですが、コード的には開いている状態の時にスライダーをスライドさせ、再度戻ってくると
アコーディオンが開いた高さの状態で高さが再取得されちゃんとした状態で表示されるのを確認しました。
bxsliderの高さ調整の部分がスライドされたときに設定されているためこの現象が起こるのかと想定しております。
自分の考えとしては、アコーディオンをクリックするたびに、bxslider側の縦サイズを再読み込みさせると
期待通りの動きになるのかなと想像しておりますが、やり方、どこを呼べばいいのかわからないです。
何かヒントの一つでもいただけますと幸いです。
何卒よろしくお願いいたします。
html
<ul class="bxslider"> <li class="sample_01"> contents01 </li> <li class="sample_02"> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニューが開く。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニューが開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニューが開く。</dd> </dl> </li> </ul>
css
.sample_01{background: #d2d2d2;} .sample_02{background: red;} #acMenu dt{ display:block; width:200px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; } #acMenu dd{ background:#f2f2f2; width:200px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; display:none; }
js
$(function(){ $('.bxslider').bxSlider({ pager:false, infiniteLoop: false, adaptiveHeight:true }); }); $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); }); });
jquery 1.11.3を使用
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/27 00:47