#やりたいこと
リスト( .menu__item
)を内包したあるスクロール領域( .menu
)内で .button
押下時にその直下に要素( .text
)を表示させて、スクロール領域( .menu
)からはみ出している場合はちゃんと見える位置に自動でスクロールする。
###実現したい処理イメージ
button
押下時に以下の2つの処理が実行されるようにしたいです。
0. 押下した .button
直後の .text
に .is-show
というclassを足して表示する。
0. もし押下した .button
直後の .text
が .menu
内で表示できない位置の場合、表示範囲内に収まるように自動でスクロールする。
(.text
は .box
以外をクリックした時にやっと消える。)
#問題
上に書いたような処理を期待してるのですが、現状以下の2つ問題が解決できません。
- 2つ目のスクロールイベント時に1で行っている「
.text
に.is-show
というclassを足して表示する」が一瞬表示されるがすぐに消える(.is-show
というclassも無くなっている)。※そもそも手動スクロール時も消えてしまう。 .button
押下時の.box
の高さとスクロール位置をちゃんと考慮して.text
がギリギリちゃんと見える位置まで自動でスクロールする。
#ソースコード
html
1<ul class="menu"> 2 <li class="menu__item"> 3 <div class="box"> 4 <button type="button" class="button">ボタン</button> 5 <p class="text">テキスト</p> 6 </div> 7 </li> 8 <li class="menu__item"> 9 <div class="box"> 10 <button type="button" class="button">ボタン</button> 11 <p class="text">テキスト</p> 12 </div> 13 </li> 14 <li class="menu__item"> 15 <div class="box"> 16 <button type="button" class="button">ボタン</button> 17 <p class="text">テキスト</p> 18 </div> 19 </li> 20</ul>
css
1.menu { 2 width: 600px; 3 height: 180px; 4 overflow-y: auto; 5 overflow-x: hidden; 6} 7.menu__item { 8 height: 80px; 9} 10.box { 11 position: relative; 12 width: 40px; 13 height: 40px; 14} 15.button { 16 width: 40px; 17 height: 40px; 18} 19.text { 20 display: none; 21 position: absolute; 22 top: 40px; 23 left: 0; 24 width: 200px; 25} 26.text.is-show { 27 display: block; 28}
javascript
1 2// buttonをクリックしたらtextが現れて見える位置の方向にスクロールする 3$(function(){ 4 $('.button').on('click', function(){ 5 var a = $('.menu').scrollTop(); 6 var b = a + 40; 7 var c = a - 40; 8 var d = $(this).parents('.menu__item').position().top; 9 if(d > 60){ 10 $('.menu').animate({scrollTop:b}); 11 } else if (d <= 0){ 12 $('.menu').animate({scrollTop:c}); 13 } 14 var $e = $(this).next('.text'); 15 if(!$e.hasClass('is-show')) { 16 $e.addClass('is-show'); 17 } 18 }); 19 $(document).on('click', function(e){ 20 if($('.text').hasClass('is-show') && !$.contains($('.text.is-show').parent('.box')[0], e.target)) { 21 $('.text.is-show').removeClass('is-show'); 22 } 23 }); 24}); 25
※ソースコードは自分で必要最低限だと思った部分だけを記載しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/24 10:48
2016/06/24 11:20
2016/06/24 12:17 編集
2016/06/28 11:59