前提
以下のJSでアコーディオンメニューを作成しています。また、現在地を取得してクラス名を付与しており、これによりページ読み込み時にクラス名is-mainNavKids--current
がついた場合には最初から子メニュー開いていたいためCSSで先述のクラス名にdisplay: block;
を指定しています。さらに、CSSでアコーディオン閉じる時にはアイコンを+
に、開いた時にー
に設定しています。
実現したいこと
初期状態でアコーディオンが開いていると、開いてる状態でアイコンが+
、閉じた時にー
になってしまうので、初期状態で開いているアコーディオンにis-toggle-accNav--open
を付与しー
を表示させ、閉じた時に付与を取り消し+
にしたい。
クラス名の付与以外をCSSだけで完結できるのであれば、そちらの方が好ましいです。(IE11対応必須)
該当のソースコード
js
1//Nav 2$(function(){ 3 $('.is-toggle-accNav').each(function(){ 4 $(this).on('click',function(){ 5 $(this).toggleClass('is-toggle-accNav--open'); 6 $("+.mainNavKids",this).slideToggle() 7 return false; 8 }); 9 }); 10}); 11 12//current 13$(function(){ 14 $('.mainNav__item__link').each(function(){ 15 var $href = $(this).attr('href'); 16 if(location.href.match($href)) { 17 $(this).parent('.mainNavKids__item').addClass('current'); 18 $(this).parents('.mainNav__item').addClass('current'); 19 $(this).parents('.mainNavKids').addClass('is-mainNavKids--current'); 20 } else { 21 $(this).parent().removeClass('current'); 22 } 23 }); 24});
css
1.is-toggle-accNav:after { 2 background: #33105f; 3 content: '\f067'; 4 display: block; 5 font-family: 'Font Awesome 5 Free'; 6 font-weight: 900; 7 line-height: 60px; 8 position: absolute; 9 right: 0; 10 text-align: center; 11 top: 0; 12 width: 60px; 13} 14.is-toggle-accNav.is-toggle-accNav--open:after { 15 content: '\f068'; 16} 17.is-mainNavKids--current { 18 display: block; 19}
html
1<nav class="collapsibleNav"> 2 <button type="button" class="is-collapsibleNav-openBtn"></button> 3 <ul class="mainNav"> 4 <li class="mainNav__item"> 5 <a href="#" class="mainNav__item__link is-toggle-accNav">親メニュー1(クリックで開く)</a> 6 <ul class="mainNavKids is-mainNavKids--current"> 7 <li class="mainNavKids__item"><a href="./index.html" class="mainNav__item__link">サブメニュー1</a></li> 8 <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li> 9 <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li> 10 </ul> 11 </li> 12〜略〜
問題のスクショ
以下、メニュー1にis-mainNavKids--current
が付与されている状態。メニュー2のアイコン表示が正しい状態。
回答3件
あなたの回答
tips
プレビュー