0

what i am trying is like adding active class to accordion menu.

i have written a simple if else jquery code which is surely not the standard approach for sure, but if it can give the result i want then works for me.

But Issue is, In my accordion menu there is main menu link and there is also Sub menus too.

so kind of confused how to make it work properly.

Here is my Accordion Menu HTML Executed Code.

<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>

This is actually kendopanelbar, and i am using jquery bbq also, so trying this as i want the accordion state to be remembered when refreshed, and also if some on open the link the respective menu should be highlighted.

AnyHow, in my code, whenever i try the if statement is executed, i mean it don't go to else even if i change the menu link.

Here is my jquery code.

//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');

            }

Any ideas why it is only executing if part and how to get the elements right for accordion menu to work properly.?

Also i did the same for twitter navbar, its working perfectly fine. except i didn't had to code the if else for twitter navbar. :)

4

1 回答 1

1

您可能必须使用

if(url && WithSubMenusLink.length){

因为$('li.k-item').has('ul.k-group').has('li.k-item').has('a[href="#' + url + '"]');返回一个 jquery 对象，所以WithSubMenusLink总是真实的。

您需要测试WithSubMenusLink.length以查看选择器查询是否返回了任何元素。

于 2013-04-28T14:40:40.510 回答