お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。
やりたいこと
サイドバーを使用して、階層化されたリスト(第一階層上のliをhoverするとそれに合った第二階層が表示される)
を表示する上で、特定の領域であれば、li要素からマウスが離れてもhoverを維持するようにしたいです。
具体的には、ヤフオク(https://auctions.yahoo.co.jp/)の左側、
「カテゴリから探す」の項目を選択すると、
黒い領域がでてくるかと思いますが、
こういった黒い領域に階層化されたリストを表示していきたいため、
2つ目の階層(ヤフオクだと「コンピュータ」などのカテゴリにあたる。
1つ目の階層はヤフオクの「コンピュータ」にあたる。)を離れて、
3つ目の階層(ヤフオクにはないが、「コンピュータ」をhoverすると黒い領域の別部分に
コンピュータをさらに細分化したカテゴリが表示されるイメージ)を選択するまでの間に黒い領域を通って、
その際に階層2のhoverが消えないようにしたいです。
※階層1は、
下記に記載されております
sidebar_bgを階層のバック部分として考えました。
(最初からサイドバーに見えている階層1をhoverすると、階層2と共に
sidebar_bgが現れる。)
しかし、階層2から3に移動する間に、親要素である
sidebar_bgを通過するので、階層2でhoverした内容を
維持して階層3を選択できません。
jqueryを使用することも検討しましたが、
ul、li要素をデータベースから引っ張ってきて取得しており、
かつ5階層あるため、
「何番目の要素をhoverすると〜〜」
といったコーディングが非常に煩雑になるので、
さらに有力な方法がないか、当質問に至りました。
宜しくお願い致します。
現状
html
1 2<div class="sidebarconts"> 3 <ul> 4 @foreach($side_category[1] as $category1 => $val1) 5 <li class="sideli1 ml-3"><a tabindex="-1" href="#">{{$val1['category_name']}}</a> 6 @php $count1 = 0 @endphp 7 @foreach($side_category[2] as $category2 => $val2) 8 @php $count2 = 0 @endphp 9 @if($val2['data-belongsto'] == $category1) 10 @php $count1++; @endphp 11 @if($count1 == 1) 12 <div class="sidebar_bg"> 13 <ul class="sideul1"> 14 @endif 15 <li class="sideli2"> <a class="side_blue_b ml-1 pl-1" href="#">{{$val2['category_name']}}</a> 16 @foreach($side_category_case[3] as $category3 => $val3) 17 @php $countcase3 = 0 @endphp 18 @if($val3['data-belongsto'] == $category2) 19 @php $countcase2++; @endphp 20 @if($countcase2 == 1) 21 <ul class="sideul2"> 22 @endif 23 <li class="sideli3"><a class="side_blue_b ml-1 pl-1" href="#">{{$val3['category_name']}}</a> 24 @foreach($side_category_case[4] as $category4 => $val4) 25 @php $count4 = 0; @endphp 26 @if($val4['data-belongsto'] == $category3) 27 @php $count3++ @endphp 28 @if($count3 == 1) 29 <ul class="sideul3"> 30 @endif 31 <li class="sideli4 "><a class="side_blue_b ml-1 pl-1" href="#">{{$val4['category_name']}}</a> 32 @foreach($side_category[5] as $category5 => $val5) 33 @if($val5['data-belongsto'] == $category4) 34 @php $count4++ @endphp 35 @if($count4 == 1) 36 <ul class="sideul4"> 37 @endif 38 <li class="sideli5 "><a class="side_blue_b ml-1 pl-1" href="#">{{$val5['category_name']}}</a></li> 39 @endif 40 @endforeach 41 @if($count4 !== 0) 42 </ul> 43 @endif 44 </li> 45 @endif 46 @endforeach 47 @if($count3 !== 0) 48 </ul> 49 @endif 50 </li> 51 @endif 52 @endforeach 53 @if($count2 !== 0) 54 </ul> 55 @endif 56 </li> 57 @endif 58 @endforeach 59 @if($count1 !== 0) 60 </ul> 61 </div> 62 @endif 63 </li> 64 @endforeach 65 </ul> 66 </div> 67
回答2件
あなたの回答
tips
プレビュー