私がしようとしているのは、アクティブなクラスをアコーディオン メニューに追加するようなものです。
確かに標準的なアプローチではない単純な if else jquery コードを作成しましたが、必要な結果が得られる場合はうまくいきます。
しかし問題は、私のアコーディオンメニューにはメインメニューリンクがあり、サブメニューもあります。
それを適切に機能させる方法がとても混乱しています。
これが私のアコーディオン メニュー HTML 実行コードです。
<ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu" aria-activedescendant="panelbar_pb_active">
<li class="k-state-active k-item k-first k-state-highlighted" role="menuitem" aria-selected="true" id="panelbar_pb_active"><a href="#home" class="k-link k-header k-state-focused">Home</a></li>
<li aria-expanded="false" class="k-item k-state-default" role="menuitem"><span class="k-link k-header">
Search
<span class="k-icon k-i-arrow-s k-panelbar-expand"></span></span><ul class="k-group k-panel" role="group" aria-hidden="true" style="display: none;">
<li class="k-item k-state-default k-first" role="menuitem" aria-selected="true" id="panelbar_pb_active"><a href="#PrizeBondSearch" class="k-link k-state-focused">Prize Bond Search</a></li>
<li class="k-item k-state-default k-last" role="menuitem"><a href="#SearchUsers" class="k-link">Users</a></li>
</ul>
</li>
<li aria-expanded="false" class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">
Profile
<span class="k-icon k-i-arrow-s k-panelbar-expand"></span></span><ul class="k-group k-panel" role="group" aria-hidden="true" style="display: none;">
<li class="k-item k-state-default k-first" role="menuitem"><span class="k-link">Update Profile</span></li>
<li class="k-item k-state-default k-last" role="menuitem"><span class="k-link">ChangePassword</span></li>
</ul>
</li>
</ul>
これは実際には kendopanelbar であり、jquery bbq も使用しているので、更新時にアコーディオンの状態を記憶させたいので、これを試してみてください。また、リンクを開くと、それぞれのメニューが強調表示されます。
とにかく、私のコードでは、if ステートメントを実行しようとするたびに、メニュー リンクを変更しても、else に移動しないことを意味します。
これが私のjqueryコードです。
//this line is for twitter navbar.
url && $('ul.nav li').find('a[href="#' + url + '"]').parent().addClass('active');
//This is for Kendo accordion menu.
var MainMenuLink=$('li.k-item').has('a[href="#' + url + '"]');
var WithSubMenusLink=$('li.k-item').has('ul.k-group').has('li.k-item').has('a[href="#' + url + '"]');
if(url && WithSubMenusLink){
$('ul.k-group').find('a[href="#' + url + '"]').addClass('k-state-selected k-state-focused').parent().attr({
"aria-selected": true,
id: 'panelbar_pb_active'
});
alert('If is Executing.');
}
else{
alert('Else is Executed.');
$('li.k-item').find('a[href="#' + url + '"]').addClass('k-state-selected k-state-focused');
}
一部の場合にのみ実行される理由と、アコーディオンメニューが適切に機能するように要素を正しく取得する方法についてのアイデアはありますか?
また、Twitterのナビゲーションバーについても同じことを行いましたが、完全に正常に機能しています。ただし、Twitter navbar の if else をコーディングする必要はありませんでした。:)