if / else在jquery中將活動狀態添加到accordian菜單中

Question

我正在嘗試的是將活動類添加到手風琴菜單中。

我寫了一個簡單的if else jquery代碼肯定不是標准方法肯定，但如果它能給出我想要的結果然后適合我。

但問題是，在我的手風琴菜單中有主菜單鏈接，也有Sub菜單。

所以有點混淆如何讓它正常工作。

這是我的手風琴菜單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，所以試試這個，因為我想要在刷新時記住手風琴狀態，並且如果有人在打開鏈接時應該突出顯示相應的菜單。

AnyHow，在我的代碼中，每當我嘗試執行if語句時，我的意思是即使我更改菜單鏈接也不會轉到其他地方。

這是我的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導航條編碼if else。 :)

Answer 1

你可能不得不使用

if(url && WithSubMenusLink.length){

因為$('li.k-item').has('ul.k-group').has('li.k-item').has('a[href="#' + url + '"]'); 返回一個jquery對象，因此WithSubMenusLink將始終是真實的。

您需要測試WithSubMenusLink.length以查看選擇器查詢是否返回任何元素。