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以查看选择器查询是否返回任何元素。

if / else在jquery中将活动状态添加到手风琴菜单中

1 个答案: